2 HTML元素大全-表单( 二 )

image/png, video/*.jpg,.png,.docemail电子邮箱,支持邮箱格式验证验证邮箱格式range滑块数字 , 用 min 和 max 来设置值的范围,step设置步长list可设置刻度search搜索框,和text差不多tel电话号码 , 和text差不多,有些终端支持虚拟键盘不验证(不同地区格式不同)urlURL地址 , 和text差不多验证url格式color,IE颜色输入控件,date , IE日期输入,年月日datetime-local,IE日期时间输入,年月日、时分秒,Chrome/Opera /Edge支持yyyy-MM-ddThh:mmmonth,IE年月输入,输入年份或月份value="https://www.huyubaike.com/biancheng/2018-05"time,IE时间控件,小时、分week,IE年和周数,用于输入以年和周数组成的日期 , 支持的不多

2 HTML元素大全-表单

文章插图
注意:
  • 一般浏览器对不支持的type,都默认降级为text 。
  • 文件选择框如通过表单提交,表单需设置属性enctype="multipart/form-data"设置表单数据编码为多种数据组合,同时设置提交方式为post,才可以上传文件(二进制) 。
<input>的常规属性基础属性描述相关type值/备注name控件名称(通用属性),表单中须赋值,会作为参数名type表单控件类型详见上表value<input>的值,可设置默认值 。tabindex当前文档的 Tab 导航顺序中的位置size宽度,文本框可显示的字符宽度,类似css的width字符数量min/maxlength可输入字符数量,文本框可输入最少/大字符数量文本输入类readonly只读,不可编辑,IE有光标显示true值可省略disabled不可用,无光标值可省略placeholder占位符/水?。?用于输入提示 , 比较常用文本输入类checked选中状态单选、多选值可省略min/max最大/小值,数字、日期值的边界数字、日期大小边界验证pattern,IE10模式(正则表达式),用于值的合法性检测文本输入类正则验证required必填,hidden、image 或者按钮类型无效值可省略,必填验证multiple是否允许多个值,逗号隔开email、file布尔值,值可省略step步长,数字、日期数字、日期list候选值:输入框的候选值列表,<datalist>值 , 显示value大多数autocomplete自动填充,设置浏览器的自动填充模式大多数autofocus页面加载时自动聚焦布尔值,值可省略inputmode值输入模式,虚拟键盘,text, tel, url, email, numeric文本输入类form所属form,值为其idformaction表单提交属性,还有formenctype、formmethod、formnovalidate、formtargetimage、submit<style>.iform {text-align: right;display: grid;grid-template-columns: 80px 200px 80px 200px;gap: 10px 5px;}/* 重写radio的样式 */.iform input[type="radio"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 50%;width: 20px;height: 20px;border: 3px solid #999;transition: 0.2s all linear;outline: none;position: relative;}.iform input[type="radio"]:checked {border: 6px solid #4A80FF;}.iform input:invalid {border-color: red;}.iform input,.iform label {height: 26px;padding: 0 3px;display: inline-block;vertical-align: middle;}</style><form class="iform">text:<input type="text" autocomplete="on" required placeholder="username" autofocus>password:<input type="password" required maxlength="12" minlength="6">number:<input type="number" step="12" min="1" value="https://www.huyubaike.com/biancheng/33" >radio:<div style="text-align:left;"><label><input type="radio" name="sex" checked>男</label><label><input type="radio" name="sex">女</label></div>checkbox:<div style="text-align:left;"><label><input type="checkbox" name="cbgroup">做饭</label><label><input type="checkbox" name="cbgroup">打球</label></div><input type="hidden" value="https://www.huyubaike.com/biancheng/key123">file:<input type="file" accept="image/*">email:<input type="email" inputmode="email" pattern=".+@163.com" placeholder="***@163.com">range:<input type="range" min="0" max="100" value="https://www.huyubaike.com/biancheng/10" step="5">search:<input type="search" list="slist">tel:<input type="tel" pattern="[0-9]*" maxlength="14">url:<input type="url" placeholder="http://example.com">color:<input type="color" value="https://www.huyubaike.com/biancheng/#ff0000" >datetime-local<input type="datetime-local">month:<input type="month" step="1">time:<input type="time" value="https://www.huyubaike.com/biancheng/12:12">week:<input type="week" value="https://www.huyubaike.com/biancheng/12:12" required><input type="reset" value="https://www.huyubaike.com/biancheng/reset重置"><input type="button" value="https://www.huyubaike.com/biancheng/普通按钮"><input type="image" src="https://www.huyubaike.com/res/btnb.png" width="60px"><input type="submit" value="https://www.huyubaike.com/biancheng/submit提交"></form>

推荐阅读