form form tag to interact with the user
Basic form controls: text boxes, text fields, radio buttons, checkboxes, buttons. must be placed in <form>..</form>
<form method="post" action="save.php"> </form>
method: The method of data transfer. action: where the input data is sent to.
1. Small example:
<p>A simple form application with radio buttons, checkboxes, and drop-down options</p>
<form method="post" action="save.php">
<label> Username:</label>
<input type="text" id="username" name="myname"/>
<label>Password:</label>
<input type="password" name="password"/><br/>
<label>Gender:</label>
<input type="radio" value="women" name="sex" >女</input>
<input type="radio" value="man" name="sex">男</input>
<br/>
<label>Hobbies:</label>
<input type="checkbox" name="checkbox1" value="读书">读书</input>
<input type="checkbox" name="checkbox2" value="美术" checked="checked">美术</input>
<input type="checkbox" name="checkbox3" value="音乐" checked="checked">音乐</input>
<input type="checkbox" name="checkbox1" value="跑步">跑步</input> <br/>
<label>City:</label>
<select>
<option value="Shanghai">Shanghai</option>
<option value="Beijing">Beijing</option>
<option value="深圳" selected="selected">深圳</option>
<option value="Suzhou">Suzhou</option>
</select><br/>
<label>Occupation:</label>
<select multiple="multiple">
<option value="文员">文员</option>
<option value="Engineer" selected="selected">Engineer</option>
<option value="教师" selected="selected">教师</option>
<option value="Programmer">Programmer</option>
</select><br/>
What are you interested in?
<label for="run">慢跑</label>
<input type="checkbox" id="run" name="慢跑"/>
<label for="dengshan">登山</label>
<input type="checkbox" id="dengshan" name="登山"/>
<label for="lanqiu">蓝球</label>
<input type="checkbox" id="lanqiu" name="篮球"/><br/>
<label>Gender:</label>
<label for="female">女</label>
<input type="radio" id="female" name="sex" />
<label for="male">男</label>
<input type="radio" id="male" name="sex"/></form>
2. Rendering:
Missing text fields that support multi-line text input:
<textarea cols="number of columns" rows="number of rows">text content</textarea>
3. Mistakes in learning
I. There are 2 ways to implement radio buttons (check boxes are also applicable):
a.
<label>Gender:</label> <input type="radio" name="sex" value="woman">女<input> <input type="radio" name="sex" value="man">男</input>
b.
<label>Gender:</label> <label for="female">女</label> <input type="radio" id="female" name="sex"/> <label for="male">男</label> <input type="radio" id="male" name="sex"/>
*****Notice*****
Regardless of the above method to implement the radio button, the name value of the radio button in the same group must be the same to realize the radio function.
Pay attention to the difference between the two methods and do not confuse them.
The second method uses the for attribute of the label:
<label for="Control id name">
**Note** The value of the for attribute of the tag should be the same as the value of the id attribute of the related control .
II. Multiple selection in drop-down list box
<select multiple="multiple">...</select>
III, submit, reset button
<input type="submit" value="提交" name="submitbotton"/> <input type="reset" value="重置" name="resetbotton"/>