之前的学习笔记中,也有涉及到表单,但是在HTML5中,表单添加了不少新的特性,添加了多个新属性和输入类型。
表单创建
HTML5的表单的创建,与HTML的表单创建方式相同。效果在此处便不再展示。 ``` ```HTML5表单的新属性
1.placeholder 占位符
HTML5 添加了一个名为 placeholder 的新属性。在 <input> 和 <textarea> 元素上,此属性提供一种提示,描述输入域所期待的值。
placeholder 翻译为占位符,占位符就是先占住一个固定的位置,等着你再往里面添加内容的符号,广泛用于计算机中各类文档的编辑。在网页页面中最常见的就是灰色的提示字体。
<form>
<input type="text" name="ID" placeholder="ID" />
<input type="text" name="PS" placeholder="Password" />
<input type="submit" value="提交" />
</form>
效果如下
2.autofocus 自动聚焦
在页面载入时自动聚焦
<form>
昵称: <input type="text" name="昵称" autofocus><br>
密码: <input type="text" name="密码"><br>
<input type="submit">
</form>
展示效果如下,很明显可以看到,昵称因为加了autofocus而被选中
3.required 带必填字段的表单 && autocomplete 自动完成表单填写
required 属性将会要求在提交之前,必须填写完毕<form>
昵称: <input type="text" name="昵称" autocomplete="on" required /><br>
密码: <input type="text" name="密码" autocomplete="off" required/><br>
<input type="submit">
</form>
此时点击提交,将不会有任何反应,因为密码尚未填写
各位应该有注意到,还有一个属性为autocomplete,即自动完成填写。
autocomplete 规定 form 或 input 域应该拥有自动完成功能(取决于on 或者 off)。经常与required搭配使用。
4.search 创建搜索框
search 为一种新的输入类型,可以创建搜索框。通常与 submit 搭配。
<input type="search" name="searchitem" />
5.datalist 搜索选项列表
datalist 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。
<input list="browsers" />
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
6.邮箱等输入类型
HTML5 拥有多个新的输入类型,包括 email,tel,url,date,time 等。
<input type="email" name="email" placeholder="example@example.com" />
<br />
<input type="tel" name="usrtel" placeholder="666.666.6666" />
<br />
<input type="url" name="homepage" placeholder="example.com" />
更多的类型可以查询文档,或者在IDE中就可以查看到