H5表单基础知识——新特性和函数

1、placeholder

当用户还没有输入值时,输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息,这在目前网站中很常见,一些JS框架都会提供类似功能,简单的说下在旧版本中常用的解决方案,为输入控件创建一个label,然后通过CSS控制些label的位置使之覆盖在输入控件上面,当label获得焦点时,浏览器会把焦点指向输入控件。不过有了placeholder,新的浏览器就内置了这一功能,其特性值会以浅灰色样式显示在输入框中,当输入框获得焦点并有值后,该提示信息自动消失。

<label for="uname">姓名:</label>

<input type="text" id="uname" name="uname" placeholder="用户名">

2、required

required 属性规定必须在提交之前填写输入域(不能为空)。它是表单验证最简单的一种方式方法,使用方法:

<label for="uname">姓名:</label>

<input type="text" id="uname" name="uname" placeholder="用户名" required>

3、list特性和datalist

通过使用list,开发人员能够为某个输入型控件构造一个选值列表,其使用方法:

网站: <input type="url" list="url_list" name="link" />

<datalist id="url_list">

    <option label="W3School" value="http://www.w3school.com.cn" />

    <option label="Google" value="http://www.google.com" />

    <option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

4、pattern

pattern 属性规定用于验证 input 域的模式(pattern),模式(pattern) 是正则表达式。那些type为email或url的输入控件内置相关正则表达式,如果value不符合其正则表达式,那表单将通不过验证,无法提交。使用方法:

<label for="url">网站:</label>

<input type="url" id="url" name="url" placeholder="http://www.abc.com" required pattern="(http|https)://.+">

5、novalidate

novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

<form action="doreg.php" method="post"novalidate="true">

    <label for="uname">姓名:</label>

    <input type="text" id="uname" name="uname" placeholder="用户名" required>

    <button class="submit" type="submit">提交</button>

</form>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • form简介 是HTML中的一个元素,它表示文档中的一个区域,这个区域包含了交互控件,用于向web服务器提交信息。...
    七里之境阅读 1,387评论 0 1
  • H5新增表单属性 form属性 以前,表单内的从属元素必须书写在表单内部。但在H5中可以把表单内的从属元素书写在任...
    oWSQo阅读 1,758评论 0 0
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 922评论 0 1
  • 一、HTML5 1.1 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定...
    福尔摩鸡阅读 16,146评论 14 51
  • 代理工作两天,发现和普通员工的不同体会,领导吩咐你的事情,从领导那里出发考虑问题,真的不一样。
    文海农夫阅读 462评论 0 0