Home > Article > Web Front-end > What properties does the HTML/CSS text input box have?
The attributes of the text input box are: 1. accept, which specifies the type of file submitted through file upload; 2. alt, which defines the alternative text for image input; 3. disabled, which defines the disabled state; 4. formaction , stipulates the URL of the file that processes the input control when the form is submitted; 5. formtarget, stipulates where to display the name or keyword of the received response after submitting the form; 6. cols, stipulates the visible width in the text area; 7. readonly , equal to read-only status.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
In HTML/CSS, there are two types of text input boxes:
input: single-line text input box
textarea : Multi-line text input box
Let’s talk about the properties supported by these two input boxes.
Attributes of the input input box
<input> tag specifies the input field in which the user can enter data.
Attributes | Value | Description |
---|---|---|
accept | audio/* video/* image/*MIME_type | Specifies the type of file submitted through file upload. (only for type="file") |
align | left right top middle bottom | HTML5 is obsolete and deprecated. Specifies the alignment of the image input. (Only for type="image") |
alt | text | Define the alternative text for image input . (only for type="image") |
autocomplete | on The off | autocomplete attribute specifies whether the <input> element input field should have autocomplete enabled. |
autofocus | autofocus | The attribute specifies that the <input> element should automatically gain focus when the page loads. |
checked | checked | The checked attribute specifies which <input> elements should be pre-selected when the page loads. (Only for type="checkbox" or type="radio") |
disabled | disabled | disabled attribute specifies the |
form | form_id | The form attribute specifies the form or forms to which the <input> element belongs. The |
formaction | URL | property specifies the URL of the file that handles the input control when the form is submitted. (Only for type="submit" and type="image") |
formenctype | application/x-www-form-urlencoded multipart/form-data The text/plain | attribute specifies how form data is encoded when submitted to the server (only suitable for type="submit" and type="image"). |
formmethod | get post | Define the HTTP method that sends form data to the action URL. (Only suitable for type="submit" and type="image") |
formnovalidate | formnovalidate | formnovalidate attribute overrides the |
formtarget | _blank _self _parent _topframename | specifies where to display the name or keyword of the response received after submitting the form. (Only suitable for type="submit" and type="image") |
height | pixels | Requirements The height of the element. (Only for type="image") |
list | datalist_id | attribute refers to the |
max | number The date | attribute specifies the maximum value of the <input> element. The |
maxlength | number | attribute specifies the maximum number of characters allowed in the <input> element. |
min | number The date | attribute specifies the minimum value of the <input> element. The |
multiple | multiple | attribute specifies that the user is allowed to enter multiple values into the <input> element. |
name | text | The name attribute specifies the name of the <input> element. |
pattern | regexp | The pattern attribute specifies the regular expression used to validate the value of the <input> element. |
placeholder | text | The placeholder attribute specifies a short tooltip that describes the expected value of the input <input> field . |
readonly | readonly | The readonly attribute specifies that the input field is read-only. The |
required | required | attribute specifies that the input field must be filled in before the form is submitted. |
size | number | The size attribute specifies the visible width of the <input> element in characters. |
src | URL | The src attribute specifies the URL of the image that appears as a submit button. (only for type="image") |
step | number | step attribute specifies the legal number intervals for the <input> element . |
type | button checkbox color date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week |
type attribute specifies the < to be displayed ;input> The type of element. |
value | text | Specifies the value of the <input> element value. |
width | pixels | The width attribute specifies the width of the <input> element. (Only for type="image") |
Examples of new type attribute values in HTML5
Enter a phone number, only Safari supports
Comes with a detection function. When submitting, it will detect whether the @ symbol is included and whether there are characters before and after the @ symbol
The entered URL must start with http:// and must have characters after it, otherwise it cannot be submitted
<input>
<input> <input>
##
<input>
<input>
<input>
<input>
Note: The date and time control also supports min and max attributes. Indicates the minimum and maximum time that can be set
<input>Attributes of the textarea input box
Description | autofocus | |
---|---|---|
Specifies that when the page loads, the text area automatically gains focus. | cols | |
number | Specifies the visible width within the text area. | disabled |
Specifies that the text area is disabled. | form | |
form_id | Define one or more forms to which the text area belongs. | maxlength |
number | Specifies the maximum number of characters allowed in the text area. | name |
text | Specifies the name of the text area. | placeholder |
text | Specifies a short hint describing the expected input value for the text area. | readonly |
Specifies that the text area is read-only. | required | |
Specifies that the text area is required/required. | rows | |
number | Specifies the number of visible rows in the text area. | wrap |
soft | Specifies how the text in the text area should wrap when the form is submitted. |
The above is the detailed content of What properties does the HTML/CSS text input box have?. For more information, please follow other related articles on the PHP Chinese website!