前端与移动开发之表单

1.组成 由表单域 表单控件（表单元素）提示信息3个部分组成 2使用场景 收集用户信息发送到后端/台 3.表单域 包含表单元素的区域 form会把它范围内的表单提示元素提交给服务器 <form action="#" method="提交数据的方式" name="表单的名字"> </form> 注意： ①action 表单数据提交地址/路径 ②method提交表单数据的方式 get（提交时有地址）/post（提交时隐藏地址） 4.表单元素 input输入表单元素 <input type="text文本框/password密码框 /radio单选框/checkbox复选框/ name定义input元素名称/value/checked/maxlength最大长度/submit提交/reset重置/button普通按钮"> 注意： ①input是一个单标签 不独占一行 ②name是表单元素名字 要求单选框和复选框都要有相同的name值 value值则不同 ③name和value是每个表单元素都有的属性值 主要给后台人员使用 ④name属性可以自定义名字 value一般设置为空（有实际意义的选项除外，否则不能向后台传递数据 每个选项的value值不能相同） ⑤后端提交的数据 name的属性值=value的值（输入框中的内容） ⑥checked="checked"只针对单选框和复选框 设置默认选中 重要 ⑦maxlength="6"设置文本输入框最大长度 ⑧submit（可以把表单域里面元素提交给后台）和reset（还原表单中数据到初始状态）里面通过value属性可以改变文字 5.表单标签 都应该在form里面 增加用户体验 帮助表单元素提高作用域 （1）<label for="text1"></label><input id="text1"> for属性是必须的 且for属性值必须是绑定表单元素的id的属性值 id属性值可以自定义 但不能重复 即全局唯一 （2）下拉表单元素 <select name="" id=""> <option value=""></option> <option selected=""></option> <option></option> </select> 注意： ①select里至少包含一对option selected="selected"默认选定 ②如果想向后台传送数据，需要在select标签中写上name属性，每个option标签中写上value属性 （3）文本域textarea <form> <textarea cols="每行显示字符数" rows="行数"> 文本内容 </textarea> </form>