-
表单标签: <form>
功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
表单属性
action: 表单提交到哪.一般指向服务器端一个程序,程序接收到表单提交过来的数据（即表单元素值）作相应处理，比如https://www.sogou.com/web
method: 表单的提交方式 post/get默认取值就是get
表单元素
基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
表单一般用来收集用户的输入信息
表单工作原理：
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息
- <input>系列标签
‘‘‘ <1> 表单类型 type: text 文本输入框 password 密码输入框 radio 单选框 checkbox 多选框 submit 提交按钮 button 按钮(需要配合js使用.) button和submit的区别？ file 提交文件：form表单需要加上属性enctype="multipart/form-data" 上传文件注意两点： 1 请求方式必须是post 2 enctype="multipart/form-data" <2> 表单属性 name: 表单提交项的键. 注意和id属性的区别：name属性是和服务器通信时使用的名称； 而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和javascript中使用的 value: 表单提交项的值.对于不同的输入类型，value 属性的用法也不同： type="button", "reset", "submit" - 定义按钮上的显示的文本 type="text", "password", "hidden" - 定义输入字段的初始值 type="checkbox", "radio", "image" - 定义与输入相关联的值 checked: radio 和 checkbox 默认被选中 readonly: 只读. text 和 password disabled: 对所用input都好使. ‘‘‘
-
姓名密码
<p>
<label for="c1">姓名：</label>
<input type="text" name="username" placeholder="username" id="c1">
</p>
<p>密码：<input type="password" name="pwd"></p>
效果如下：
密码是密文显示
密码：
-
性别爱好
<p>性别: <input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="0">女</p> <p>爱好：<input type="checkbox" name="hobby" value="football" checked>足球 <input type="checkbox" name="hobby" value="basktball">篮球<input type="checkbox" name="hobby" value="double2">双色球</p>
默认选择足球
性别: 男女
爱好：足球 篮球双色球
-
其余的
<p>头像：<input type="file"></p> <p><input type="reset" value="reset"></p> <p><input type="button" value="按钮" onclick="alert(1234)"></p> <p><input type="hidden" name="key" value="v1"></p>
头像：
-
select标签
<p> 省份： <select name="province" size="3" multiple="multiple"> <option value="1">河北省</option> <option value="2" selected>河南省</option> <option value="3">湖北省</option> <option value="4">日本省</option> </select> </p>
效果如下：
multiple设置可以多选，size设置默认显示3个
省份：
-
文本框
<p>
<textarea name="gerenjianjie" id="" cols="20" rows="10" placeholder="个人简介"></textarea>
</p>
-
提交submit
<p><input type="submit" value="submit"></p>
练习：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <form action="" method="get" enctype="multipart/form-data"> <p> <label for="">姓名：</label> <input type="text" name="username" placeholder="username" id="c1" > </p> <p> <label for="">密码：</label> <input type="text" name="pwd" placeholder="passwd"> </p> <p> 性别：<input type="radio" name="gender" value="1">男 <input type="radio" name="gender" value="0">女 </p> <p> 爱好： <input type="checkbox" name="hobby" value="football" checked>足球 <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="JAPAN TV">日本电影 <input type="checkbox" name="hobby" value="pingpang">乒乓球 </p> <p> 头像： <input type="file"> </p> <p> <input type="reset" name="reset" value="重置按钮"> </p> <p> <input type="button" name="button" value="button按钮" onclick="alert(1234)"> </p> <p> <input type="hidden" name="key" value="v1"> </p> <p> <select name="省份" id="province" size="2" multiple="multiple"> <option value="1">河北省</option> <option value="2">河南省</option> <option value="3">山东省</option> <option value="4">日本省</option> </select> </p> <p> <textarea name="gerenjianjie" id="g1" rows="30" cols="50" placeholder="个人简介"></textarea> </p> <p> <input type="submit" value="submit"> </p> </form> </body> </html>
