HTML Chapter III

Chapter III Forms

1. What are forms:

Forms are a container for organizing user information. Place the content that the user needs to fill in the form container, and the form will send the data to the server uniformly when the user clicks the Submit button.

2. Form labels and Form properties:

Specify how to send form data common values post or get with form data How to send form data Specify how form data is sent

Indicates where to send form data

<form method= "POST" action= "result.html" >

<p> Name: <input name= "Mingzi" type= "text" ></p>

<p> Password: <inputname= "Mima" type= "password" ></p>

<p button: <input type= "Submit" name= "button" value= "Submit" ></p>

<p> button: <input type= "reset" name= "reset" value= "refill" ></p>

INPUT element type

The value of the INPUT element

INPUT element name

<input type= "Submit" name= "button" value= "Submit" >

Property	Description
Type	Specifies the type of the element. text, password, checkbox, radio, submit, reset, file, hidden, image, and button, default to Text
Name	Specifies the name of the form element.
Value	The initial value of the element. A value must be specified when type is radio
Size	Specifies the initial width of the form element. When type is text or password, the size of the form element is in characters. For other types, width in pixels
MaxLength	type The maximum number of characters entered when it is text or password
Checked	type is a radio or checkbox, specifies whether the button is selected

Default value

Length of text box

The length of the input data

Column:

<p> Login Name:

<input name= "sname" type= "text" value= "Zhang" size= "" "Maxlength=" >

</p>

3. Radio button:

<form method= "POST" action= "" >

Gender: <input name= "GEN" type= "Radio" class= "input" value= "male" > Male &nbsp;

<inputname= "GEN" type= "Radio" class= "input" value= "female" > Female

</form>

4. check box:

<form method= "POST" action= "" >

Hobby:

<input type= "checkbox" name= "interest" value= "Sports" > Motion

<input type= "checkbox" name= "interest" value= "talk" > Chat

<input type= "checkbox" name= "interest" value= "play" > Play games

</form>

5. List box:

<form method= "POST" action= "" >

<select name= "Yue" >

<optionvalue= "" > select month </option>

<optionvalue= "1" > January </option>

<optionvalue= "2" > February </option>

<optionvalue= "3" > March </option>

<optionvalue= "4" > April </option>

<optionvalue= "5" > May </option>

</select> Month

radio button/check box	Options default
radio button	Checked= "Checked"
check box	Selected= "Selected"

6. Button:

1.button Normal button

2.submit Submit button

3.reset reset button

<inputtype= "Reset" name= "Chongzhi" value= "reset" >

7. Multiline Text fields:

<textareaname= "textarea" cols= "the width of the column displayed" rows= "Number of rows displayed" ></textarea>

8. File domains:

<input type= "File" name= "Wenjian"/>

9. Advanced application of the form:

To set a hidden field for a form:

<form action= "" method= "get" >

<p> Username: <input name= "Minzi" type= "text" ></p>

<p> Password: <input name= "Mima" type= "password" ></p>

<p><inputtype= "Submit" value= "Submission" ></p>

Change the Type property to hidden hidden type to create a hidden field

<p><inputtype= "hidden" value= "666" name= "userid" ></p>

<from>

10. Table read-Only and disable settings:

Read-only	readonly= "ReadOnly"
Disable	disabled= "Disabled"

11. A Semantically formatted form:

Domains: You can use the <fieldset> tags in your form to define your domain. In a nutshell, when you place a set of form elements inside a <fieldset> tag, the browser displays them in a special way, which may have special boundary effects.

Domain title: The so-called domain title is the setting of a title for the created domain. Setting a field header requires a new label,<legend> tag, and the content within that tag is treated as the title of the field.

<from>

<fieldset>

<legend> User Information </legend>

Name: <input type= "Text" >

Age: <input type= "Text" ></br>

Mobile: <input type= "Text" >

E-mail: <inputtype= "text" ></br>

</fieldset>

</form>

12. Labeling of form elements

Labeling the form elements is intended to enhance the usability of the mouse. When labeling with form elements, there is no improvement in the effect on client rendering. However, if the user clicks inside the callout text with the mouse, the browser automatically shifts the focus to the form element associated with the callout.

<form>

Please select:

<inputname= "Xingbie" type= "Radio" id= "n" value= "male" checked= "checked"/>

<label for= "n"/> Men &nbsp;

<input name= "Xingbie" type= "Radio" id= "L" value= "female"/>

<label for= "L"/> Female

HTML Chapter III