Form elements of HTML

A, the form elements are placed in the <form></form> tag. Take a look at the properties of the form

Property Value Description

Accept Mime_type the type of file submitted through the file

Accept-charset the character set accepted by the CharSet server for processing form data

Enctype mime_type Specifies how the form data should be encoded before it is sent to the server

Method get/post Specifies how form data is sent, get methods, and Post methods

The name of the form is specified

Target _blank/_parent/_self/_top specifies where to open the action URL

Three important attribute descriptions:

1. Action specifies the address to accept the action when the form is sent

2. method specifies how the form data is sent. Optional values: Get, post. Get is sent when the data in the form is appended to the URL. The post is sent in an HTTP request.

3. enctype specifies how the form data is encoded prior to the server being sent, with special attention to setting the encoding to Enctype= "Multipart/form-data" when the upload domain is included, otherwise the background cannot obtain the file data sent by the browser. is to set the MIME encoding of the form. By default, this encoding format is application/x-www-form-urlencoded and cannot be used for file uploads, only the value of input inside the multipart/form-data,form is passed in 2 binary mode. To complete the transfer of file data. When FTP uploads large files, there is an option to upload them in binary mode.

Three options for Enctype

Value Description

Application/x-www-form-urlencoded encode all characters before sending (default)

Multipart/form-data characters are not encoded. Send data in binary mode, when the form contains an upload domain, you must use the background to get the uploaded file.

The Text/plain space is converted to the "+" plus sign, but does not encode special characters.

Other common notes

Properties	value	Description	DTD
Accept	Mime_type	Specifies the type of file submitted through the file.	STF
Align	Left Right Top Middle Bottom	Do not approve of use. Specifies the alignment of the image input.	Tf
Alt	Text	Defines alternate text for image input.	STF
Checked	Checked	Specifies that this input element should be selected when it is first loaded.	STF
Disabled	Disabled	This element is disabled when the INPUT element is loaded.	STF
MaxLength	Number	Specifies the maximum length of characters in the input field.	STF
Name	Field_name	Defines the name of the INPUT element.	STF
ReadOnly	ReadOnly	Specifies that the input field is read-only.	STF
Size	Number_of_char	Defines the width of the input field.	STF
Src	Url	Defines the URL of an image to display as a Submit button.	STF
Type	button CheckBox File Hidden Image Password Radio Reset Submit Text	Specifies the type of the INPUT element.	STF
Value	Value	Specifies the value of the INPUT element.	STF

B, input

First, the Text field

<input type= "text" name= "text" value= ""/>

Two, password domain

The password is similar to a text box, but the content entered inside is displayed as a dot.

<input type= "Password" name= "text" value= "/>

Three, radio button

Men: <input type= "Radio" name= "Sex" value= "male"/> male<br/> Women: <input type= "Radio" name= "Sex" value= " Female "/> Female

Four, check box

<input type= "checkbox" Name= "Check1" value= "/>

Five, button

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

Six, reset button

When you click the Reset button, the form where the reset button is located is emptied, and the other forms are unaffected.

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

Seven, submit button

When you click the Submit button, the browser will automatically submit the form.

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

Eight, hidden fields

Hidden fields are not displayed in the browser and exist only to save some less important information.

<input type= "hidden" value= "I am a hidden field"/>

IX. Upload domain

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

Ten, Picture button

<input type= "image" src= "123.gif"/>

Xi. drop-down list

<select>   <option value= "0" >0</option>   <option value= "1" >1</option>   <option value= "2" >2</option></select>     

　　

Property	Optional values	Description
Disabled	Disabled	Specifies that the drop-down list is disabled.
Multiple	Multiple	Specifies that multiple options can be selected.
Name	Name	Specifies the name of the drop-down list.
Size	Number	Specifies the number of visible options in the drop-down list.

12. Label

The label element does not present any special effects to the user. However, it improves usability for the user of the mouse. This control is triggered if you tap text inside a LABEL element. That is, when the user selects the label, the browser automatically shifts the focus to the label-related form controls. For example, when you place a radio button inside a label. Clicking on the text in the label will also trigger the radio button, rather than just dot dots.

<p><label><input type= "Radio" name= "male"/> Men </label></p><p><label> <input type= "Radio" name= "male"/> Women </label></p>

　　ManWoman

Can also be written like this

<form>  <label for= "male" >Male</label>  <input type= "Radio" name= "Sex" id= "male"/>  <br/>  <label for= "female" >Female</label>  <input type= "Radio" name= "Sex" id= " Female "/></form>

13, disabled and ReadOnly

Disabled and read-only properties. ReadOnly is valid only for input (Text/password) and textarea, and disabled is valid for all form elements, including Select, Radio, CheckBox, Button, and so on. But when the form element is used with disabled, when we submit the form as a post or get, the value of the element is not passed out, and readonly passes the value out.

You can use JavaScript to disabled the submit button after the user presses the Submit button, which prevents the network condition from being poor, and the user repeatedly submits the button causing the data to be redundantly stored in the database.

        <form id= "Form1" action= "/home/index" method= "POST" >            disable text box: <input type= "text" disabled= "disabled"/>            read-only text box: <input type= "text" readonly= "readonly"/>        </form>

14, TextArea

Properties	value	Description	DTD
Cols	Number	Specifies the visible width within the text area.	STF
Rows	Number	Specifies the number of rows visible within the text area.	STF

        <form id= "Form1" action= "/home/index" method= "POST" >            <textarea cols= "Ten" rows= "ten" > I am a soldier, from the common people. </textarea>        </form>

XV, fieldset define Fields

FieldSet used to group form elements, legend to set group headings

          <fieldset>            <legend> your information? </legend>            Height: <input type= "text" value= "/>"            Weight: <input type= "text" value= "/>"          </fieldset>

The display effect is as follows:

Here is a simple example:

        <form id= "Form1" action= "/home/index" method= "POST" > <input type= "hidden" value= "Hide Info"/ > account: <input type= "text" maxlength= "8"/><br/> Password: <input type= "Password"/><  Br/> Name: <input type= "text" name= "name"/><br/> Sex: <input type= "Radio" name= "male"  /> Men <input type= "Radio" name= "male"/> Women <br/> whether single: <input type= "checkbox" Name= "single"/> <br/> Ages: <select name= "Age" > <option value= "0" >0-30 </option> <option value= "1" >31-60</option> <option value= "2 >60-100</option> </select><br/> favorite Flower: <select multiple= "multiple" name = "Flower" > <option value= "0" > Rose </option> <option value= "1 "> Lilies </option>                       <option value= "2" > Cactus </option> <option value= "3" > Tulip </o Ption> <option value= "4" > Marigold </option> </select> <br/&gt            ;            Upload Photo: <input type= "file"/> <br/> <input type= "image" src= "Brt_btn.png"/> <br/> <input type= "button" value= "Confirm"/>&nbsp;&nbsp;<input type= "Submit" value= "Submit"/> &nbsp;&n Bsp;<input type= "reset" value= "reset"/><br/> </form>

The display results are as follows: