Form label

A form is a form for users to enter information and interact with a web page. In most cases, the information submitted by the user will be sent to the server. For example, the search bar of a website is a form.

The form is composed of one or more kinds of widgets, such as input boxes, buttons, radio buttons, or check boxes. These widgets are called controls.

<form>

Introduction

The <form> tag is used to define a form, and all form content is placed in this container element.

<form>
  <!-- Various form controls-->
</form>

The above code is the basic form of the form.

The following is a more common example.

<form action="https://example.com/api" method="post">
  <label for="POST-name">User name:</label>
  <input id="POST-name" type="text" name="user" />
  <input type="submit" value="Submit" />
</form>

The above code is a form, which contains a total of three controls: a <label> label, a text input box, and a submit button. Among them, the name attribute of the text input box is user, which means that a key-value pair named user will be sent to the server. The key value is the value attribute of this control, which is equal to the value entered by the user.

The user enters the user name in the text input box, such as foobar, and then clicks the submit button, the browser will send a POST request to the server https://example.com/api, sending user=foobar like this A piece of data.

<form> has the following attributes.

-accept-charset: A list of character encodings accepted by the server, separated by spaces, and the default is the same as the web page encoding. -action: The URL where the server receives the data. -autocomplete: If the user does not fill in a certain control, whether the browser can automatically fill in the value. Its possible values ​​are off (do not fill in automatically) and on (fill in automatically). -method: HTTP method for submitting data, possible values ​​are post (form data is sent as HTTP data body), get (form data is sent as URL query string), dialog (form is located in <dialog>Internal use). -enctype: When the method attribute is equal to post, this attribute specifies the MIME type submitted to the server. The possible values ​​are application/x-www-form-urlencoded (default value), multipart/form-data (in case of file upload), text/plain. -name: The name of the form, which should be unique in the web page. Note that if a control does not set the name property, then the value of this control will not be sent to the server as a key-value pair. -novalidate: Boolean attribute, whether to cancel the validation when the form is submitted. -target: In which window to display the data returned by the server, possible values ​​are _self (current window), _blank (new window), _parent (parent window), _top (top window), The name attribute of the <iframe> tag (that is, the return result of the form is displayed in the <iframe> window).

enctype attribute

The enctype attribute of the <form> form specifies the MIME type of the data given by the browser when the data is submitted using the POST method. This attribute can take the following values.

(1) application/x-www-form-urlencoded

application/x-www-form-urlencoded is the default type, and the control name and control value must be escaped (spaces are converted to + signs, non-numbers and non-letters are converted to the form of %HH, and line breaks are converted to CR LF), the control name and control value are separated by =. The controls are arranged in the order of appearance, and the controls are separated by &.

(2) multipart/form-data

multipart/form-data is mainly used for file upload. When uploading a large file of this type, the file will be divided into multiple pieces for transmission. The HTTP header of each piece has a Content-Disposition attribute with a value of form-data and a name attribute with a value of the control name.

Content-Disposition: form-data; name="mycontrol"

Below is the form for uploading files.

<form
  action="https://example.com/api"
  enctype="multipart/form-data"
  method="post"
>
  User name: <input type="text" name="submit-name" /><br />
  File: <input type="file" name="files" /><br />
  <input type="submit" value="Upload" /> <input type="reset" value="clear" />
</form>

In the above code, enter the user name Larry, select a file file1.txt, and click "Upload". The actual data sent by the browser is as follows.

Content-Type: multipart/form-data; boundary=--AaB03x

--AaB03x
Content-Disposition: form-data; name="submit-name"

Larry
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain

... contents of file1.txt ...
--AaB03x--

In the above code, the browser sends this form into multiple data blocks. At the top, the Content-Type field is used to tell the server that the data format is multipart/form-data (ie multiple data blocks), and the separation mark of each data block is --AaB03x. The first line of each data block is Content-Disposition, where the name field represents the control name of this data block, and the data body is the data value of the control, such as the name property of the first data block It is the submit-name control, and the data body is the value of the control Larry. The second data block is the control files. Since this control is an upload file, the file name file1.txt must be given with the filename attribute. The data body is the content of file1.txt.

<fieldset>, <legend>

The <fieldset> tag is a block-level container tag that represents a collection of controls and is used to combine a group of related controls into a group.

<form>
  <fieldset>
    <p>Age: <input type="text" name="age" /></p>
    <p>Gender: <input type="text" name="gender" /></p>
  </fieldset>
</form>

In the above code, the two input boxes are a group, and a box will be displayed outside of them.

<fieldset> has the following attributes.

-disabled: Boolean attribute. Once set, the controls contained in <fieldset> will be unavailable and all will be grayed out. -form: Specify the <form> to which the control group belongs, and its value is equal to the id attribute of <form>. -name: The name of the control group.

The <legend> tag is used to set the title of the <fieldset> control group, usually the first element inside the <fieldset>, which will be embedded and displayed in the upper border of the control group.

<fieldset>
  <legend>student status registration</legend>
  <p>Age: <input type="text" name="age" /></p>
  <p>Gender: <input type="text" name="gender" /></p>
</fieldset>

In the above code, the title of this control group will be embedded and displayed in the upper border of <fieldset>.

<label>

The <label> tag is an inline element that provides a text description of the control to help users understand the purpose of the control.

<label for="user">Username:</label> <input type="text" name="user" id="user" />

In the above code, there will be a text description "Username:" in front of the input box.

One big advantage of <label> is that it increases the usability of the control. Some controls are relatively small (such as radio buttons) and are not easy to click. Then click the corresponding <label> label to select the control. Clicking on <label> is equivalent to the click event of the control itself.

The for property of <label> is associated with the corresponding control, and its value is the id property of the corresponding control. Therefore, it is better to set the id attribute for the control.

The control can also be placed in <label>, at this time, the for attribute and the id attribute are not needed.

<label
  >User name:
  <input type="text" name="user" />
</label>

The attributes of <label> are as follows.

-for: The id attribute of the associated control. -form: The id attribute of the associated form. After setting this attribute, <label> can be placed anywhere on the page, otherwise it can only be placed inside <form>.

A control can have multiple associated <label> tags.

<label for="username">Username:</label>
<input type="text" id="username" name="username" />
<label for="username"><abbr title="required">*</abbr></label>

In the above code, <input> has two associated <label>.

<input>

Introduction

The <input> tag is an inline element used to receive user input. It is a stand-alone label and has no closing mark.

It has many types, depending on the value of the type attribute. The default value is text, which represents an input box.

<input />
<!-- Same as -->
<input type="text" />

The above code will generate a single-line input box in which the user can enter text.

There are many attributes of <input>, and some attributes are specific to a certain type, and are introduced in the "Type" section below. Here are some common attributes of all types.

-autofocus: Boolean attribute, whether to automatically get the focus when the page loads. -disabled: Boolean attribute, whether to disable the control. Once set, the control will be grayed out and the user can see it but cannot operate it. -form: The id attribute of the associated form. After setting this property, the control can be placed anywhere on the page, otherwise it can only be placed inside <form>. -list: The id attribute of the associated <datalist>, set the data list related to the control, see the following for details. -name: The name of the control, which is mainly used for the key name of the control's key-value pair when submitting data to the server. Note that only the control with the name property set will be submitted to the server, and will not be submitted if it is not set. -readonly: Boolean attribute, whether it is read-only. -required: Boolean attribute, whether it is required or not. -type: Control type, see below for details. -value: The value of the control.

Types of

The type attribute determines the form of <input>. This attribute can take the following values.

(1) text

type="text" is a normal text input box, used to enter a single line of text. If the user enters a newline character, the newline character is automatically removed from the input.

<input
  type="text"
  id="name"
  name="name"
  required
  minlength="4"
  maxlength="8"
  size="10"
/>

The text input box has the following supporting attributes.

-maxlength: The maximum number of characters that can be entered, the value is a non-negative integer. -minlength: The minimum number of characters that can be entered. The value is a non-negative integer and must be less than maxlength. -pattern: The user enters a regular expression that must match. For example, if the user is required to enter 4 to 8 English characters, it can be written as pattern="[az]{4,8}". If the user input does not meet the requirements, the browser will pop up a prompt and will not submit the form. -placeholder: When the input field is empty, the sample value used for prompting. As long as the user does not have any characters, the prompt will appear, otherwise it will disappear. -readonly: Boolean attribute, which means that the input box is read-only, and the user can only see but not input. -size: Indicates how many characters wide the display length of the input box is. Its value is a positive integer, which is equal to 20 by default. Characters exceeding this number can only be seen by moving the cursor. -spellcheck: Whether to enable spell check for user input, possible values ​​are true or false.

(2) search

type="search" is a text input box for searching, basically equivalent to type="text". Some browsers will display a delete button at the end of the input box when typing, and clicking it will delete all the input, allowing the user to start typing from the beginning.

Below is an example.

<form>
  <input
    type="search"
    id="mySearch"
    name="q"
    placeholder="Enter search term..."
    required
  />
  <input type="submit" value="search" />
</form>

(3) button

type="button" is a button with no default behavior. Usually the script specifies the listener function of the click event to use.

<input type="button" value="click" />

It is recommended not to use this type as much as possible, and use the <button> tag instead. One has clearer semantics, and the other is that pictures or other HTML codes can be inserted inside the <button> tag.

(4) submit

type="submit" is the submit button of the form. When the user clicks this button, the form is submitted to the server.

<input type="submit" value="Submit" />

If you do not specify the value attribute, the browser will display the default text on the submit button, usually Submit.

This type has the following supporting attributes, which are used to override the corresponding settings of the <form> tag.

-formaction: The URL of the server that submits the form data. -formenctype: the encoding type of the form data. -formmethod: HTTP method used to submit the form (get or post). -formnovalidate: A boolean value indicating whether to ignore form validation before submitting the data to the server. -formtarget: After receiving the data returned by the server, in which window to display it.

(5) image

type="image" means to use an image file as a submit button, and its behavior and usage are exactly the same as type="submit".

<input type="image" alt="login" src="login-button.png" />

In the above code, the image file is a button that can be clicked, and the data will be submitted to the server when clicked.

This type has the following supporting attributes.

-alt: Alternative string displayed when the image cannot be loaded. -src: The URL of the loaded image. -height: The display height of the image, in pixels. -width: The display width of the image, in pixels. -formaction: The URL of the server that submits the form data. -formenctype: the encoding type of the form data. -formmethod: HTTP method used to submit the form (get or post). -formnovalidate: A boolean value indicating whether to ignore form validation before submitting the data to the server. -formtarget: After receiving the data returned by the server, in which window to display it.

When the user clicks on the image button to submit, two additional parameters x and y will be submitted to the server, indicating the click position of the mouse, such as x=52&y=55. x is the abscissa and y is the ordinate. Both use the upper left corner of the image as the origin (0, 0). If the image button is set with the name attribute, such as name="position", then this value will be used as the prefix of the coordinates, such as position.x=52&position.y=55. This function is usually used for map-type operations to let the server know which part of the map the user has clicked on.

(6) reset

type="reset" is a reset button. After the user clicks it, all table controls are reset to their initial values.

<input type="reset" value="reset" />

If you don't set the value attribute, the browser will add a default text to the button, usually Reset.

This control is not very useful. If the user clicks the wrong button, all the entered values ​​will be reset. It is not recommended to use it.

(7) checkbox

type="checkbox" is a checkbox that allows you to select or deselect this option.

<input type="checkbox" id="agreement" name="agreement" checked />
<label for="agreement">Do you agree?</label>

The above code will display a clickable selection box in front of the text, click to select, click again to cancel. In the above code, the checked attribute means that it is selected by default.

The default value of the value attribute is on. In other words, if the value attribute is not set, in the above example, when the check box is selected, agreement=on will be submitted. If it is not selected, there will be no item when submitting.

Multiple related check boxes can be placed in <fieldset>.

<fieldset>
  <legend>Your interest</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">Encoding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">Music</label>
  </div>
</fieldset>

In the above code, if the user selects two check boxes at the same time, there will be two name attributes when submitting, such as interest=coding&interest=music.

(8) radio

type="radio" is a single selection box, which means that only one item can be selected in a group of choices. The radio button is usually a small circle, which will be filled or highlighted when selected.

<fieldset>
  <legend>Gender</legend>
  <div>
    <input type="radio" id="male" name="gender" value="male" />
    <label for="male">Male</label>
  </div>
  <div>
    <input type="radio" id="female" name="gender" value="female" />
    <label for="female">Female</label>
  </div>
</fieldset>

In the above code, gender can only be selected from two options.

Note that the value of the name attribute of multiple radio buttons should be consistent. The value submitted to the server is the selected value.

The supporting attributes of this type are as follows.

-checked: Boolean attribute, indicating whether the current item is selected by default. -value: The value submitted to the server when the user selects this item, the default is on'.

(9) email

type="email" is a text input box that can only enter email addresses. Before the form is submitted, the browser will automatically verify whether it conforms to the format of the e-mail address. If it does not, it will display a prompt and it cannot be submitted to the server.

<input type="email" pattern=".+@foobar.com" size="30" required />

The above code will generate a required text box, you can only enter the email address with the suffix foobar.com.

This type has a Boolean attribute of multiple. Once set, it means that the input box can enter multiple comma-separated email addresses.

<input id="emailAddress" type="email" multiple required />

Note that if both the multiple attribute and the required attribute are set at the same time, zero email addresses are allowed, that is, the input box is allowed to be empty.

The supporting attributes of this type are as follows.

-maxlength: The maximum number of characters that can be entered. -minlength: The minimum number of characters that can be entered. -multiple: Boolean attribute, whether to allow multiple comma-separated email addresses to be entered. -pattern: Enter a regular expression that must match. -placeholder: The display text when the input is empty. -readonly: Boolean attribute, whether the input box is read-only. -size: A non-negative integer, indicating how many characters the input box displays. -spellcheck: Whether to enable spell check on the input content, possible values ​​are true or false.

This type can also be matched with the <datalist> tag to provide alternative input options.

<input type="email" size="40" list="defaultEmails" />

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk"></option>
  <option value="jbourne@unknown.net"></option>
  <option value="nfury@shield.org"></option>
  <option value="tony@starkindustries.com"></option>
  <option value="hulk@grrrrrrrr.arg"></option>
</datalist>

In the above code, after the input focus enters the input box, a drop-down list will be displayed with five reference items for the user's reference.

(10) password

type="password" is a password input box. The user's input will be obscured, and characters usually display asterisks (*) or dots (·).

<input type="password" id="pass" name="password" minlength="8" required />

The browser display of this type of input box will be different. A common processing method is that every time the user enters a character, it is displayed in the input box for one second, and then the character is blocked.

If the user input contains line feed (U+000A) and carriage return (U+000D), the browser will automatically filter these two characters.

The supporting attributes of this type are as follows.

-maxlength: The maximum number of characters that can be entered. -minlength: The minimum number of characters that can be entered. -pattern: Enter a regular expression that must match. -placeholder: The display text when the input is empty. -readonly: Boolean attribute, whether the input box is read-only. -size: A non-negative integer, indicating how many characters the input box displays. -autocomplete: Whether to allow autocomplete, possible values ​​are on (autocomplete allowed), off (autocomplete not allowed), current-password (fill in the password saved on the current website), new -password (automatically generate a random password). -inputmode: The type of data that the user is allowed to enter, possible values ​​are none (do not use the system input method), text (standard text input), decimal (number, including decimals), numeric ( Numbers 0-9) and so on.

(11)file

type="file" is a file selection box that allows users to select one or more files, and is often used for file upload functions.

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" />

This type has the following properties.

-accept: Allowed file types to be selected, separated by commas, MIME types (such as image/jpeg), suffixes (such as .doc), and audio/* ( Any audio file), video/* (any video file), image/* (any image file) and other notations. -capture: The source used to capture the image or video data, possible values ​​are user (user facing camera or microphone), environment (external camera or microphone). -multiple: Boolean attribute, whether to allow the user to select multiple files.

(12) hidden

type="hidden" is a control that is not displayed on the page. The user cannot enter its value. It is mainly used to transmit some hidden information to the server. For example, a CSRF attack will forge form data, so using this control can generate a unique hidden number for each form to prevent forged form submission.

<input id="prodId" name="prodId" type="hidden" value="xm234jq" />

The above control is invisible on the page. When the user submits the form, the browser will send prodId=xm234jq to the server.

(13)number

type="number" is a number input box, only numbers can be input. The browser usually displays a clickable up and down arrow on the far right of the input box. Click the up arrow and the number will increase, and click the down arrow and the number will decrease.

<input type="number" id="tentacles" name="tentacles" min="10" max="100" />

The above code specifies the number input box, the minimum can be 10, and the maximum can be 100.

This type can accept any numeric value, including decimals and integers. The step attribute can be used to restrict only integers to be accepted.

This type has the following supporting attributes.

-max: The maximum value allowed to be entered. -min: The minimum value allowed to be entered. -placeholder: The sample value displayed when the user input is empty. -readonly: Boolean attribute, indicating whether the control is read-only. -step: When you click the up and down arrows, the step value of each decrement of the value. If the value entered by the user does not meet the setting of the step value, the browser will automatically round to the nearest value. The default step value is 1, if the initial value attribute is set to 1.5, then click the up arrow to get 2.5, and click the down arrow to get 0.5.

(14) range

type="range" is a slider. The user drags the slider to select a value in a given range. Because the value generated by dragging is not accurate, if you need an accurate value, it is not recommended to use this control. A common example is to adjust the volume.

<input type="range" id="start" name="volume" min="0" max="11" />

The above code will generate a slider area with a minimum value of 0 and a maximum value of 11. The user drags the slider to select the desired volume.

The matching attributes of this type are as follows, and the usage is consistent with type="number".

-max: The maximum allowed value, the default is 100. -min: The minimum allowed value, the default is 0. -step: Step value, the default is 1.

The initial value of the value attribute is the default position of the slider. If the value attribute is not set, the slider will stop between the maximum and minimum values ​​by default. If the max attribute, min attribute, and value attribute are not set, then the value attribute is 50.

This type is used in conjunction with the <datalist> tag to generate scales in the sliding area.

<input type="range" list="tickmarks" />

<datalist id="tickmarks">
  <option value="0" label="0%"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
  <option value="40"></option>
  <option value="50" label="50%"></option>
  <option value="60"></option>
  <option value="70"></option>
  <option value="80"></option>
  <option value="90"></option>
  <option value="100" label="100%"></option>
</datalist>

The above code will produce 11 scales between 0 and 100. Among them, there will be text prompts in the three positions of 0%, 50% and 100%, but the browser may not support it.

Note that the browser generates horizontal sliders. If you want to generate a vertical slider, you can use CSS to change the direction of the slider area.

(15)url

type="url" is a text box that can only enter URLs. Before submitting the form, the browser will automatically check whether the URL format is correct. If it is incorrect, it will not be submitted.

<input
  type="url"
  name="url"
  id="url"
  placeholder="https://example.com"
  pattern="https://.*"
  size="30"
  required
/>

The pattern attribute of the above code specifies that the entered URL can only use the HTTPS protocol.

Note that this type specifies that URLs without a protocol are invalid. For example, foo.com is invalid, and http://foo.com is valid.

The supporting attributes of this type are as follows.

-maxlength: The maximum number of characters allowed. -minlength: The minimum string allowed. -pattern: The regular expression that the input content must match. -placeholder: The sample text displayed when the input is empty. -readonly: Boolean attribute, indicating whether the content of the control is read-only. -size: A non-negative integer, which indicates how many characters the input box displays. -spellcheck: Whether to enable spell check, possible values ​​are true (enabled) and false (disabled).

This type is used in conjunction with the <datalist> tag to form a drop-down list for users to choose. As the user keeps typing, the display range will be reduced and only matching options will be displayed.

<input id="myURL" name="myURL" type="url" list="defaultURLs" />

<datalist id="defaultURLs">
  <option value="https://developer.mozilla.org/" label="MDN Web Docs"></option>
  <option value="http://www.google.com/" label="Google"></option>
  <option value="http://www.microsoft.com/" label="Microsoft"></option>
  <option value="https://www.mozilla.org/" label="Mozilla"></option>
  <option value="http://w3.org/" label="W3C"></option>
</datalist>

In the above code, the label attribute of <option> represents the text label, which is displayed on the right side of the drop-down box for options, and the URL is displayed on the left side.

(16)tel

type="tel" is an input box that can only enter phone numbers. Since phone number formats are different all over the world, browsers do not have a default verification mode, and custom verification is required most of the time.

<input
  type="tel"
  id="phone"
  name="phone"
  pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
  required
/>

<small>Format: 123-456-7890</small>

The above code defines an input box that can only enter a 10-digit phone number.

The supporting attributes of this type are as follows.

-maxlength: The maximum number of characters allowed. -minlength: The minimum string allowed. -pattern: The regular expression that the input content must match. -placeholder: The sample text displayed when the input is empty. -readonly: Boolean attribute, indicating whether the content of the control is read-only. -size: A non-negative integer, which indicates how many characters the input box displays.

(17) color

type="color" is a control for selecting colors, and its values ​​are always in the format of #rrggbb.

<input type="color" id="background" name="background" value="#e66465" />

The above code will display a color block of #e66465 in the Chrome browser. Click on the color block and a color picker will appear for the user to choose a color.

If the initial value of the value attribute is not specified, the default value is #000000 (black).

(18) date

type="date" is an input box that can only enter the date. The user can enter the year, month, and day, but not the hour, minute, and second. The input format is YYYY-MM-DD.

<input
  type="date"
  id="start"
  name="start"
  value="2018-07-22"
  min="2018-01-01"
  max="2018-12-31"
/>

The above code will display an input box, the default date is July 22, 2018. After the user clicks, a date picker will be displayed for the user to select a new date.

This type has the following supporting attributes.

-max: The latest allowable date, in the format of yyyy-MM-dd. -min: The earliest allowable date, the format is yyyy-MM-dd. -step: Step value, a number, in days.

(19) time

type="time" is an input box that can only enter the time. You can enter the hour, minute, and second, but not the year, month, and day. The date format is hh:mm in a 24-hour system. If seconds are included, the format is hh:mm:ss. The form of the date picker varies from browser to browser.

<input type="time" id="appt" name="appt" min="9:00" max="18:00" required />

<small>Business hours from 9 a.m. to 6 p.m.</small>

This type has the following supporting attributes.

-max: the latest time allowed. -min: The earliest time allowed. -readonly: Boolean attribute, indicating whether the user can not edit the time. -step: Step value, in seconds.

<input id="appt" type="time" name="appt" step="2" />

In the above code, if you adjust the control, the time each time changes by 2 seconds.

(20) month

type="month" is an input box that can only enter the year and month, the format is YYYY-MM.

<input type="month" id="start" name="start" min="2018-03" value="2018-05" />

This type has the following supporting attributes.

-max: the latest time allowed, the format is yyyy-MM. -min: The earliest time allowed, the format is yyyy-MM. -readonly: Boolean attribute, indicating whether the user can not edit the time. -step: step value, the unit is month.

(21) week

type="week" is an input box for entering the week of the year. The format is yyyy-Www, for example, 2018-W18 means the 18th week of 2018.

<input
  type="week"
  name="week"
  id="camp-week"
  min="2018-W18"
  max="2018-W26"
  required
/>

This type has the following supporting attributes.

-max: the latest time allowed, the format is yyyy-Www. -min: The earliest time allowed, the format is yyyy-Www. -readonly: Boolean attribute, indicating whether the user can not edit the time. -step: Step value, in weeks.

(22) datetime-local

type="datetime-local" is a time input box that allows users to enter the year, month, day, and hour, in the format of yyyy-MM-ddThh:mm. Note that this control does not support seconds.

<input
  type="datetime-local"
  id="meeting-time"
  name="meeting-time"
  value="2018-06-12T19:30"
  min="2018-06-07T00:00"
  max="2018-06-14T00:00"
/>

This type has the following supporting attributes.

-max: the latest time allowed, the format is yyyy-MM-ddThh:mm. -min: The earliest time allowed, the format is yyyy-MM-ddThh:mm. -step: Step value, in seconds, the default value is 60.

<button>

The <button> tag will generate a clickable button. There is no default behavior. Usually you need to use the type attribute or script to specify the button's function.

<button>click</button>

The above code will generate a button, and the text above is "click".

Not only text can be placed inside <button>, but also images can be placed, which can form image buttons.

<button name="search" type="submit"><img src="search.gif" />Search</button>

<button> has the following attributes.

-autofocus: Boolean attribute, which means that when the web page loads, the focus is on this button. There can only be one element in a web page with this attribute. -disabled: Boolean attribute, indicating that the button is not available, which will cause the button to be grayed out and not clickable. -name: The name of the button (used with the value attribute), which will be submitted to the server along with the form in the form of name=value. -value: The value of the button (used with the name attribute), which will be submitted to the server along with the form in the form of name=value. -type: the type of the button. There are three possible values: submit (to submit data to the server after clicking), reset (reset the values ​​of all controls to the initial value), button (no default Behavior, the behavior of the button specified by the script). -form: Specify the <form> form associated with the button, the value is the id attribute of <form>. If this attribute is omitted, the parent form where the associated button is located will be defaulted. -formaction: The target URL of the data submitted to the server, which will override the action attribute of the <form> element. -formenctype: The encoding method of the data submitted to the server, which will override the enctype attribute of the <form> element. There are three possible values: application/x-www-form-urlencoded (default value), multipart/form-data (only for file upload), text/plain. -formmethod: The HTTP method used to submit data to the server, which will override the method attribute of the <form> element. The possible values ​​are post or get. -formnovalidate: Boolean attribute. When the data is submitted to the server, turning off local validation will override the novalidate attribute of the <form> element. -formtarget: After the data is submitted to the server, the window that displays the data returned by the server will overwrite the target attribute of the <form> element. Possible values ​​are _self (current window), _blank (new empty window), _parent (parent window), and _top (top window).

<select>

The <select> tag is used to generate a drop-down menu.

<label for="pet-select">Pets:</label>

<select id="pet-select" name="pet-select">
  <option value="">--Please select one--</option>
  <option value="dog">dog</option>
  <option value="cat">Cat</option>
  <option value="others">Other</option>
</select>

In the above code, <select> generates a drop-down menu, the menu title is "--Please select an item--", and there is a drop-down arrow on the far right. Click the drop-down arrow, three menu items will be displayed for the user to click to select.

The menu items of the drop-down menu are given by the <option> tag, and each <option> represents a value that can be selected. The value attribute of the selected <option> is the server value sent by the <select> control.

<option> has a boolean attribute selected, once set, it means that the item is the selected menu item by default.

<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

In the above code, the second item Second Value is selected by default. When the page loads, it will be displayed directly on the drop-down menu.

<select> has the following attributes.

-autofocus: Boolean attribute, whether to automatically get the focus when the page loads. -disabled: Boolean attribute, whether to disable the current control. -form: The id attribute of the associated form. -multiple: Boolean attribute, whether multiple menu items can be selected. By default, only one option can be selected. Once set, most browsers will display a scrolling list box. The user may need to hold down Shift or other function keys to select multiple items. -name: The name of the control. -required: Boolean attribute, whether it is a required control. -size: When the multiple property is set, the number of lines visible at a time when the page is displayed, and other lines need to be scrolled to view.

<option>, <optgroup>

The <option> tag is used in <select>, <optgroup>, and <datalist> to indicate a menu item, see the example of <select>.

It has the following properties.

-disabled: Boolean attribute, whether to disable this item. -label: The description of the item. If omitted, it is equal to the text content of the item. -selected: Boolean attribute, whether it is the default value. Obviously, only one menu item in a group of menus can set this attribute. -value: The value of the item submitted to the server. If omitted, it is equal to the text content of the item.

<optgroup> indicates the grouping of menu items, usually used inside <select>.

<label
  >Pets:
  <select name="pets" multiple size="4">
    <optgroup label="Four-legged pet">
      <option value="dog">dog</option>
      <option value="cat">Cat</option>
    </optgroup>
    <optgroup label="Birds">
      <option value="parrot">Parrot</option>
      <option value="thrush">Thrush</option>
    </optgroup>
  </select>
</label>

In the above code, <select> is a drop-down menu, and its internal use <optgroup> to divide the menu items into two groups. Each group has its own title, which will be displayed in bold, but the user cannot select it.

Its properties are as follows.

-disabled: Boolean setting, whether to disable the group. Once set, all menu items in this group are not selectable. -label: The title of the menu item group.

<datalist>

The <datalist> tag is a container tag, used to provide a set of related data for a specified control, and is usually used to generate input prompts. It uses <option> internally to generate each menu item.

<label for="ice-cream-choice">Ice cream:</label>
<input
  type="text"
  list="ice-cream-flavors"
  id="ice-cream-choice"
  name="ice-cream-choice"
/>

<datalist id="ice-cream-flavors">
  <option value="chocolate"></option>
  <option value="coconut"></option>
  <option value="mint"></option>
  <option value="Strawberry"></option>
  <option value="vanilla"></option>
</datalist>

In the above code, <input> generates a text input box where the user can input text. The list attribute of <input> specifies the id attribute of the associated <datalist>. The data list of <datalist> is used to input suggestions. When the user clicks the input box, a drop-down menu will be displayed with suggested input items. And it will also automatically match the characters that the user has entered to narrow the range of options. For example, if the user enters "xiang", only the item "vanilla" will be displayed.

Note that <option> does not need to close the tag here.

The <option> tag can also be added with the label attribute as an explanatory text. Google Chrome will display it on the next line of value.

<datalist id="ide">
  <option value="Brackets" label="by Adobe"></option>
  <option value="Coda" label="by Panic"></option>
</datalist>

The rendering result of the above code is that the Chrome browser will display the value value in the drop-down list (such as Brackets), and then display the label value in small characters below it (such as by Adobe).

<textarea>

<textarea> is a block-level element used to generate multi-line text boxes.

<textarea id="story" name="story" rows="5" cols="33">
This is a long story.
</textarea>

The above code will generate a text box with a length of 5 lines and a width of 33 characters.

The tag has the following attributes.

-autofocus: Boolean attribute, whether to automatically get the focus. -cols: The width of the text box, in characters, the default value is 20. -disabled: Boolean attribute, whether to disable the control. -form: The id attribute of the associated form. -maxlength: The maximum number of characters allowed. If this value is not specified, the user can enter an unlimited number of characters. -minlength: The minimum number of characters allowed to be entered. -name: The name of the control. -placeholder: The prompt text displayed when the input is empty. -readonly: Boolean attribute, whether the control is read-only. -required: Boolean attribute, whether the control is required. -rows: The height of the text box, in rows. -spellcheck: Whether to open the browser's spell check. The possible values ​​are true (open), default (determined by the parent element or web page settings), and false (closed). -wrap: Whether the entered text wraps automatically. Possible values ​​are hard (the browser automatically inserts a newline character CR + LF, so that each line does not exceed the width of the control), soft (automatically wrap when the input exceeds the width, but will not add a new line break , And the browser guarantees that all line breaks are CR + LR, which is the default value), off (turn off automatic line wrapping, a horizontal scroll bar will appear when the length of a single line exceeds the width).

<output>

The <output> tag is an inline element used to display the results of user operations.

<input type="number" name="a" value="10" /> +
<input type="number" name="b" value="10" /> = <output name="result">20</output>

The tag has the following attributes.

-for: The id attribute of the associated control, which represents the operation result of the control. -form: The id attribute of the associated form. -name: The name of the control.

<progress>

The <progress> tag is an inline element that indicates the progress of the task. The browser will usually display it as a progress bar.

<progress id="file" max="100" value="70">70%</progress>

The tag has the following attributes.

-max: The maximum value of the progress bar, which should be a floating point number greater than 0. The default value is 1. -value: The current value of the progress bar. It must be a valid floating point number between the 0 and max attributes. If the max attribute is omitted, the value must be between 0 and 1. If the value attribute is omitted, the progress bar will scroll, indicating that it is in progress and it is impossible to know the progress of completion.

<meter>

The <meter> tag is an in-line element that represents an indicator, used to display a value within a known range, and is very suitable for situations with proportional nature such as the current progress of the task, the used disk space, and the amount of charge. Browsers usually display it as a non-scrolling indicator bar.

<p>
  The current temperature of the oven is
  <meter min="200" max="500" value="350">350 degrees</meter>.
</p>

The above code will display an indicator bar, the left side represents 200, the right side represents 500, and the current position stays at 350.

Note that the child elements of the <meter> element will not be displayed under normal circumstances. It will only be displayed if the browser does not support <meter>.

The tag has the following attributes.

-min: The lower limit of the range, must be less than the max attribute. If omitted, it defaults to 0. -max: The upper limit of the range, must be greater than the min attribute. If omitted, it defaults to 1. -value: The current value, which must be between the min attribute and the max attribute. If omitted, it defaults to 0. -low: indicates the upper threshold of the "low end", which must be greater than the min attribute, and smaller than the high attribute and the max attribute. If omitted, it is equal to the min attribute. -high: indicates the lower threshold of "high end", which must be less than the max attribute, and greater than the low and min attributes. If omitted, it is equal to the max attribute. -optimum: Specify the optimal value, which must be between the min attribute and the max attribute. It should be used together with the low attribute and the high attribute to indicate the optimal range. If the optimum is less than the low attribute, it means that the "low end" is the optimal range; if it is greater than the high attribute, it means that the "high end" is the optimal range; if it is between low and high, It means that the "middle zone" is the best range. If omitted, it is equal to the middle value of min and max. -form: The id attribute of the associated form.

The Chrome browser uses three colors to indicate where the indicator bar is located. In a good situation, the current position is green; in a normal situation, the current position is yellow; in a bad situation, the current position is red.

<meter
  id="fuel"
  name="fuel"
  min="0"
  max="100"
  low="33"
  high="66"
  optimum="80"
  value="50"
>
  at 50/100
</meter>

In the above code, the indicator bar can be divided into three sections: 0 ~ 32, 33 ~ 65, 66 ~ 100. Since the attribute of optimum is 80, so 66 ~ 100 is a good situation, 33 ~ 65 is a normal situation, and 0 ~ 32 is a bad situation. Therefore, the browser will display the current location in different colors according to the value attribute, red when it is less than 33, green when it is greater than 65, and yellow between the two.

-HTML Interactive Form Validation, by Chris Dumez