表单有哪些html5新控件?

表单有哪些html5新控件?,第1张

表单中新增的控件(type属性)

email: 提交表单时检测值是否是一个电子邮件格式

url: 提交表单时检测值是否是一个url格式

date: 年-月-日格式的控件

time: 时:分格式的控件

datetime: 年-月-日 时:分 格式的控件(UTC时间)

datetime-local: 年-月-日 时:分 格式的控件(本地时间)

month: 年-月格式的控件

week: 年-周数格式的控件

number: 数字输入框

<input type="number" name="" id="" value="60" max="100" min="0" />

range: 选择区域

<input type="range" name="" id="" value="60" max="100" min="0" />

tel: 电话输入框

search: 用于搜索

color: 调用系统选色器

新增控件属性:

placeholder: 占位符,输入框提示信息

<input type="text" autofocus placeholder=''/>

required: 该input为必填项

autofocus: 在页面加载时,域自动地获得焦点

autocomplete="off/on":可以记录输入信息

必须有name属性 必须提交过

off==>关闭 on==>打开

<input type="tel" name="user" id="" value="" autocomplete="on"/>

pattern: 正则验证

<input type="tel" pattern="[0-9]{7,12}"/>

min/max: input能输入的最小/最大字节的长度

step: 针对number和range类型,每次递增step的值

list: 指定一个datalist,作为下拉提示单

<input type="text" />文本输入框<br />

<input type="submit" value="提交按钮" /><br />

<input type="reset" value="重置按钮" /><br />

<input type="radio" />单选按钮<br />

<input type="password" />密码输入框<br />

<input type="image" />图像<br />

<input type="hidden" />隐藏域<br />

<input type="file" />文件提交<br />

<input type="checkbox" />复选框<br />

<input type="button" />普通按钮<br />

<select>

<option>选择列表</option>

<optgroup><option>下拉子菜单</option></optgroup>

</select>

<textarea>文本区域</textarea>

<label>标签</label>

<fieldset>分组</fieldset>

<legend>描述元素,必填信息</legend>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/5951066.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-09
下一篇 2023-03-09

发表评论

登录后才能评论

评论列表(0条)

保存