创建表单的方法：
用form标签
form标签常用元素：input：单行表单、select：下拉式表单、textarea：多行文本域
input元素的type属性：text：文本属性、checkbox：多选表单、radio：单选表单、password：密码属性、submit：提交表单、reset：重置表单
select必须连用元素：option
lable关联标签：
显示关联：
显式关联是通过label标签的for属性，显式与另一个表单控件关联。需要注意的是，for属性的值必须是与label标签在同一文档中的可标记表单元素的id，注意是id而不是name
隐式关联：
隐式关联是直接将表单控件放到label标签内，这种情况下，label标签只能包含一个表单元素，包含多个只对第一个有效。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单</title> 6 </head> 7 <body> 8 <form action="" method=""> 9 <!-- action:浏览器输入的数据被传送到的地方，比如一个PHP页面(action.php)--> 10 <!-- method:数据传送的方式(get(默认)/post)。--> 11 <input type="text" name="username" value="" placeholder="请输入用户名"/> 12 <br> 13 <input type="text" name="pwd" value="" placeholder="请输入密码"/> 14 <!--type:--> 15 <!--当type为’text‘时，输入框为文本输入框--> 16 <!--当type为’password‘时，输入框为密码输入框--> 17 <!--name:为文本框命名，后期用来给后台程序Java、PHP使用--> 18 <!--value:为文本输入框设置默认值。(一般起到提示作用)--> 19 <!--placeholder：提示用户内容的输入格式--> 20 <br> 21 你的性别是？ 22 男<input type="radio" name="sex" value="" checked="checked"> 23 <!-- checked=‘checked’时，该选项被默认选中--> 24 女<input type="radio" name="sex" value="" > 25 <!-- 注意：同一组的单选按钮，name的值一定要一致，比如上面的例子为同一个名称’sex’，这样同一组的单选按钮才可以起到单选的作用。--> 26 <br> 27 你的爱好有？ 28 吃美食<input type="checkbox" name="01" value="" checked="checked"> 29 看电视<input type="checkbox" name="02" value="" > 30 玩游戏<input type="checkbox" name="03" value="" > 31 <br> 32 选择你要报名的课程： 33 <select name="course" id=""> 34 <option value="python" selected='selected'>Python中级</option> 35 <option value="go">go 精讲</option> 36 <option value="web">web全栈</option> 37 <option value="Linux">Linux深入挖掘</option> 38 <!-- value=" " ：引号里的内容是向服务器提交的值--> 39 <!-- selected='selected' ：默认选中项--> 40 <!-- --> 41 </select> 42 <br> 43 <!-- 显示关联--> 44 <label for="myName">姓名：</label> 45 <input type="text" value="" id="myName" name="myName"> 46 <input type="submit" value="提交"> 47 <input type="reset" value="重置"> 48 <!-- 隐式关联--> 49 <label>性别 50 <input type="text" value="" id="theinput" name="theinput"> 51 </label> 52 <!-- type:只有当type值设置为submit时，按钮才会有提交作用--> 53 <!-- value:按钮上显示的文字--> 54 <!-- label标签标识用户项目中的标题--> 55 <!--它通常关联一个控件,label中的for属性，与某表单控件中的id对应。作为label元素的标签控件。--> 56 <!--另外，当用户单击该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。--> 57 <br> 58 个人说明： 59 <textarea rows="5" cols="40"></textarea> 60 </form> 61 </body> 62 </html>