HTML forms are powerful tools for interacting with users; however, for historical and technical reasons, it is not always obvious how to use them to their full potential. In this chapter, we will cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.
Form: collects different types of user input data and sends it to the server to realize data interaction between the user and the server.
The form tag form declares the scope of data collection. As long as it is in the form, it is the data to be collected.
There can be multiple form tags in a page, and they can only be in parallel relationship and cannot be nested. When users send data to the server, they can only submit data in one form at a time. If you want to submit multiple forms, you need to use asynchronous interaction in js.
<form> element
HTML forms are used to collect user input.
Element definition HTML form:
<form>.formelements.</form>
1. HTML forms contain form elements.
Form elements refer to different types of input elements, check boxes, radio buttons, submit buttons, etc.
(1) <input> element
The <input> element is the most important form element. The <input> element has many forms, depending on the type attribute. This is the type used in this chapter:
(2) Text input
<input type=text> defines a single-line input field for text input:
<!DOCTYPEhtml><html><body><form>Last name:<br><inputtype=textname=firstname><br>First name:<br><inputtype=textname=lastname></form><p>Please note the form itself is invisible. </p><p>Also note that the default width of text fields is 20 characters. </p></body></html>
The results presented are as follows:
(3) Radio button input
<input type=radio> defines radio buttons. Radio buttons allow the user to select one of a limited number of options:
<!DOCTYPEhtml><html><body><form><inputtype=radioname=sexvalue=1checked>Male<br><inputtype=radioname=sexvalue=2>Female</form></body></html>
The results presented are as follows:
(4) Submit button
<input type=submit> defines the button used to submit the form to the form-handler. A form handler is typically a server page that contains scripts for processing input data. The form handler is specified in the form's action attribute:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>Last name:<br><inputtype=textname=firstnamevalue=李><br>Name:<br><inputtype=textname=lastnamevalue=Lei ><br><br><inputtype=submitvalue=Submit></form><p>If you click Submit, the form data will be sent to a page named demo_form.ashx for subsequent processing. </p></body></html>
The results presented are as follows:
2. Form attributes:
(1) Action attribute
The action attribute defines the action to be performed when the form is submitted. The usual way to submit a form to the server is to use a submit button. Typically, forms are submitted to a web page on a web server. In the example above, a server script is specified to handle the submitted form:
<formaction=action.php>
If the action attribute is omitted, action will be set to the current page.
(2)Method attribute
The method attribute specifies the HTTP method (GET or POST) used when submitting the form:
<formaction=action.phpmethod=GET>
or:
<formaction=action.phpmethod=POST>
When to use GET?
You can use GET (the default method): if the form submission is passive (such as a search engine query) and there is no sensitive information. When you use GET, the form data is visible in the page address bar:
action_page.php?firstname=Han&lastname=Meimei
Note: GET is best suited for submitting small amounts of data. The browser will set a capacity limit (255 characters).
When to use POST?
You should use POST: if the form is updating data, or contains sensitive information (such as passwords). POST is more secure because the data submitted in the address bar of the page is invisible.
(3) Name attribute
Each input field must have a name attribute set if it is to be submitted correctly. This example will only submit the Last name input field:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>Last name:<br><inputtype=textvalue=李><br>First name:<br><inputtype=textname=lastnamevalue=Lei>< br><br><inputtype=submitvalue=Submit></form><p>If you click Submit, the form data will be sent to a page named demo_form.ashx. </p><p>The last name will not be submitted because this input element does not have a name attribute. </p></body></html>
The results presented are as follows:
3. Form controls
Combine form data with <fieldset>
The <fieldset> element combines related data in a form. The <legend> element defines the title for the <fieldset> element.
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx><fieldset><legend>Personal information:</legend>Last name:<br><inputtype=textname=firstnamevalue=Mickey><br> Name:<br><inputtype=textname=lastnamevalue=Mouse><br><br><inputtype=submitvalue=Submit></fieldset></form></body></html>
Forms are used to collect user data, which needs to be filled in various controls. HTML controls are also implemented through tags, but they will present some special appearances and have some interactive functions.
HTML forms can contain controls as shown in the following table: