form表单
1、什么是表单
之前的表格是像用户展示数据,那么表单就是用户输入信息,然后发送给后台数据库,让页面具有交互性
标签:
<form></form>
注意:form是块级元素,form之间不可以嵌套,但是一个页面可以有多个form表单
属性:
<form name="提交的名称" action="提交的url" method="提交的方法">
name 表单提交时的名字 action 提交到的地址 method 提交的方法,有 get
和post
俩种,默认为get
enctype 规定当前提交数据的编码 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*num
Html示例:
<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>