form表单
1、什么是表单
之前的表格是像用户展示数据，那么表单就是用户输入信息，然后发送给后台数据库，让页面具有交互性
标签：
<form></form>注意：form是块级元素，form之间不可以嵌套，但是一个页面可以有多个form表单
属性：
<form name="提交的名称" action="提交的url" method="提交的方法">
name 表单提交时的名字 action 提交到的地址 method 提交的方法，有 get和post俩种，默认为getenctype 规定当前提交数据的编码 get和post俩种提交的方法的区别：
- 数据提交方式，get把数据提交，url可以看见，post看不见
- get只能提交少量的数据(不能大于2kb),post理论上没有限制
2、表单元素
-
input标签
格式：
<input type="" name="" value=""/>name：提交数据名字
type类型：
text 文本框，value为当前值 password 密码框，value为当前值 radio 单选按钮，使用单选按钮一定要使用name分组，同一组内单选 checkbox 多选框 submit 提交按钮，提交表单，value为按钮上的值 reset 重置按钮，重置表单，value为按钮上的值 button 按钮，一个普通的按钮，没有作用，value为按钮上的值 image 提交图片按钮，value为按钮上的值 file 文件域，可以上传系统本地的文件，注意： 默认的form表单不支持上传文件 form的属性enctype="multipart/form-data"时可以把文件转换为二进制 hidden 隐藏域，一般给后台传输信息，在前端不会展示给用户 注意：按钮也可以单独使用botton标签，默认不写type时submit
Html示例：
<body> <form action="" name="formTest"> <p> 用户名：<input type="text" name="userName"/> </p> <p> 密码：<input type="password" name="password"/> </p> <p> 性别：<input type="radio" name="gender">男 <input type="radio" name="gender">女 </p> <p> 爱好：<input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">音乐 <input type="checkbox">游戏 </p> <p> 文件： <input type="file"> </p> <p> 隐藏域： <input type="hidden"> </p> <p> 图片提交按钮： <input type="image" value="113344"> </p> <p> <input type="submit" value="登陆"> <input type="reset" value="取消"> <input type="button" value="没有任何功能的按钮"> <button>提交</button> <button type="reset">重置</button> <button type="button">没有任何功能的按钮</button> </p> </form> </body> -
下拉框
标签：
select>option*numHtml示例：
<body> <form action="#" method="post" name="selectTest" > <p> 城市： <select name="city" id=""> <!-- 下拉列表 --> <option value="0">北京</option> <!-- 选项 --> <option value="1">河北</option> <option value="2">湖北</option> <option value="3">上海</option> </select> <select name=""> <option value="">武汉</option> <option value="">张家口</option> <option value="">宜昌</option> </select> </p> </form> </body> -
文本域
标签：
<textarea> 默认在文本域中显示的内容 </textarea>属性：
name 这是名字 cols 这是列显示数量 rows 这是行显示数量 Html示例：
<body> <form action="#" method="post" name="textareaTest"> <p> 自我介绍: <textarea name="myself" cols="60" rows="10">我叫 </textarea> </p> </form> </body> -
label绑定
作用：提示用户体验度，当点击了label后，相关标签会被选中，提高鼠标的可用性
标签：
<label></label>属性：
for为了谁，写对应元素的id，进行绑定Html示例：
<body> <form action="#" method="post" name="labelTest"> <p> <!-- 点击label标签内容就会选中与label绑定的标签 --> 性别： <input type="radio" name="gender" id="man"> <label for="man">男</label> <input type="radio" name="gender" id="woman"> <label for="woman">女</label> </p> <p> 爱好： <input type="checkbox" id="basketball"> <label for="basketball">篮球</label> <input type="checkbox" id="football"> <label for="football">足球</label> <input type="checkbox" id="badminton"> <label for="badminton">羽毛球</label> </p> </form> </body>
3、表单元素的属性
属性类型：
type 设置输入框的内容 name 设置表单元素的名称 value 设置表单元素的当前值 checked 设置默认选中，一般配合单选按钮或者多选按钮使用(属性等于属性值) selected 设置默认的显示，和select下拉框中的option配合使用(属性等于属性值) disable 禁用 readonly 只读 hidden 隐藏 Html示例：
<body> <form action="" name="form2"> <!-- 设置文本输入框禁用 --> 姓名： <input type="text" disabled> <!-- 设置密码输入框只读 --> 密码： <input type="password" readonly> <!-- 设置性别单选按钮默认选中男 --> 性别： <input type="radio" name="gender" id="man" checked> <!--默认选中--> <label for="man">男</label> <input type="radio" name="gender" id="woman" disabled> <label for="woman">女</label> <!-- 设置下拉框默认显示4月 --> 月份： <select name="month" id=""> <option value="1">1月</option> <option value="2">2月</option> <option value="3">3月</option> <option value="4" selected>4月</option> <!--默认显示--> <option value="5">5月</option> <option value="6">6月</option> </select> </form> </body>
4、H5新增表单元素
新增元素列表：
邮箱 必须包含 @，且@后必须有内容url 网址 必须包含一个协议，且协议之后要有内容 search 搜索框 输入完后，后面会有一键清除按钮 color 颜色 颜色选择器，可以选择任意颜色 tel 电话 number 数字 可以设置最小值，最大值，步数和当前值 range 滑块 可以设置最大值，最小值，步数和当前值 data 日期 可以跳出日期选择器，有些浏览器不支持 month 月 可以跳出月选择器，有些浏览器不支持 week 周 可以跳出周选择器，有些浏览器不支持 Html示例：
<body> <form action="" name="form7"> 邮箱： <input type="email" name="email" placeholder="请输入邮箱"> 网址： <input type="url"> 搜索 <input type="search"> 颜色 <input type="color"> 电话 <input type="tel"> 数字 <input type="number" max="100" min="0" step="10" value="34"> 滑块 <input type="range" max="100" min="0" step="20" value="20"> 日期 <input type="date"> 周 <input type="week"> 月 <input type="month"> </form> </body>
5、H5新增表单元素属性
新增属性列表：
placeholder=“默认提示” 显示默认提示 autofocus 光标自动聚焦(一般写在第一个表单元素上面) requried 非空判断(必填项) pattern 正则表达式判断 minlength 填写的最小长度 maxlength 填写的最大长度 min 最小值，配合数字(number)和滑块使用(range) max 最大值，配合数字(number)和滑块使用(range) step 步数，可以设置任意值，配合数字(number)和滑块使用(range) multipe 可以设置填写多个，用英文的逗号隔开 Html示例：
<body> <form action="" name="form1"> 姓名： <input type="text" name="username" placeholder="请输入姓名" autofocus required minlength="2" maxlength="6"> 密码： <input type="password" name="password"> 邮箱： <input type="email" name="email" multiple> 数字： <input type="number" min="0" max="100" step="5"> <input type="submit"> <input type="reset"> </form> </body>
1229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
