当需要向服务器提交数据时，我们一般会选择使用form表单来实现数据的提交。
<form>标签用来表示一个需要向服务器提交的数据表单，在这个form表单的子标签里，需要实现让用户 输入、单选、多选(input标签)，下拉选择(select标签)，点击(button标签或者input标签)，输入大段文字(textarea标签)等操作。
一.form标签的使用 <form action="http://www.baidu.com" method="post"> <!-- 在这里放入input/select/textarea等子标签，用来让用户输入内容 --></form>常见属性
属性名取值含义actionurl表示当点击提交按钮时，form表单里的数据要提交到的服务器地址methodget或post表示向服务器提交数据时的方式，支持get和post提交，默认提交方式是get二. form表单的常见属性 属性名取值含义typetext默认值，显示一个普通的文本输入框button显示一个普通按钮submit显示一个提交按钮，点击时，会提交所在form表单里的数据image根据src属性指定的图片路径，加载显示一张图片，作为提交按钮reset显示一个重置按钮，点击时，会重置所在form表单里的数据radio显示一个单选框，多个相关联的单选框name属性值要一样，否则无法实现多选checkbox显示一个复选框file显示一个文件按钮，点击时可以选择电脑上的文件password显示一个密码输入框，当用户输入时，会显示成为密文number显示一个输入框，用户只能输入数字、正负号和字母e,其他非数字无法输入email显示一个文本输入框，用户输入的内容要符合电子邮箱地址，否则点击提交按钮时会出现错误提示，无法提交数据tel控制用户输入手机号，当用户使用手机访问网页，点击文本框时，会弹出拨号键盘name任意文本设置input的名称，当提交给服务器时，会作为key提交value任意文本当提交给服务器时，会作为value提交 当input为文本输入框时，设置文本输入框上的内容；当input为按钮时，用来设置按钮上的显示文字checkedcheckeck或者不设置当type为radio或者checkbox时，用来设置默认选中autofocusautofocus或者不设置设置当打开页面时，文本输入框是否自动获取焦点autocompleteautocomplete或者不设置设置是否自动补全，注意，只有input标签设置了name属性以后，autocomplete才有效requiredrequired或不设置表示该输入框必须要填写，否则无法提交readonlyreadonly或不设置表示该输入框里的数据不可修改disableddisabled或不设置表示禁用文本输入框，多用于按钮max/min数字当type为number时，用来设置最大值和最小值区间placeholder任意文本当input的类型为输入框时，用来在输入框中显示提示信息三 .form表单的练习 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!-- form 表单 action: 作用是提交给服务器的地址 method: 指定以哪种方式向服务器提交数据 get:所有的请求参数直接拼接到地址栏 post:单独 --><!-- <input type="text"> --><form action="https://www.baidu.com" method="get"><!-- input:用来接收用户的输入 type属性,用来接收规定输入的类型 常见的可选值如下: text:默认值,显示一个普通的文本输入框 number: 允许用户输入数字,包括 . - e tel: 只在移动端有效 button: 显示一个按钮 radio: 用来显示一个单选按钮,如果想要实现联动,需要给input添加相同的name属性 checkbox:用来显示一个多选框 reset:重置当前form表单里的数据 submit: 用来向服务器提交数据(form 表单的地址), value属性,用来设置input标签的内容 当type = button 时,用来表示在按钮上显示文字 placeholder属性,用来显示input的输入提示信息 name属性，设置input的名字，当提交给服务器时，会作为key提交 --><!-- select标签用来显示一个下拉选择框--> <span>用户名:</span> <input type="text" value="zhangsan" name="username" accesskey="u"><br> <span >密码:</span> <input type="password" placeholder="请输入密码" name="password"> <br> <span>性别:</span><!-- label 标签.使用label 标签的for属性和另一个标签的id属性进行关联--> <input type="radio" name="sex" id="nan" value="male"> <label for="nan" >男</label> <input type="radio" name="sex" id="nv" value="female"> <label for="nv">女</label> <input type="radio" name="sex" id="secret" value="secret"> <label for="secret">保密</label><br> <span>爱好:</span> <input type="checkbox" id="tubu" name="hobbies" value="hiking" checked> <label for="tubu">徒步</label> <input type="checkbox" id="paobu" name="hobbies" value="running"> <label for="paobu">跑步</label> <input type="checkbox" id="pashan" name="hobbies" value="climbing"> <label for="pashan">爬山</label><br> <span>手机号:</span> <input type="tel" name="phone"> <input type="button" value="点击发送验证码" id=""><br> <span>文件:</span> <input type="file" ><br> <span>照片</span> <input type="image"><br> <span>省份</span> <select name="province" > <option value="hubei">湖北</option> <option value="henan" selected>河南</option> <option value="sichuan">四川</option> <option value="shanxi">陕西</option> <option value="sx">山西</option> </select><br> <input type="reset" value="重置"> <input type="submit" value="注册"></form></body></html> 效果图