7.4HTML5新增的表单属性

最新推荐文章于 2024-12-24 00:03:20 发布

原创最新推荐文章于 2024-12-24 00:03:20 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

html5学习专栏收录该内容

16 篇文章

订阅专栏

1.placeholder属性

<label> <input type="text" placeholder="背景提示文字"></label>

在输入框中向用户显示描述性说明或提示信息,类似于登陆页面中,账号的输入框内有让我们输入账号的提示,但只要我们单击它并随意输入一个字符就会自动消失
2.autocomplete属性
用来知晓是否保存输入值已备用将来使用

属性值	作用
on	可以显示指定候补输入的数据列表
of	不显示指定候补输入的数据列表
无	不指定

<input type="text" name="名1" autocomplete="off" />
<input type="text" name="名2" autocomplete="on" />
<input type="text" name="名3" autocomplete="" />

3.autofocus属性
当页面打开时,此处自动获取光标焦点(相当于一进来鼠标就单击了一下此处)

<input type="text" autofocus/>

4.list属性
list属性的值为某个<datalist>标签的id.
注:datalist标签也是HTML5新增的,若用户想要的值不再选择框里时,允许手动输入

<input  name="名4" list="4">
<datalist id="4">
	<option value="选项1">选项1</option>
	<option value="选项2">选项2</option>
	<option value="选项3">选项3</option>
</datalist>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<form>
	<label> text : <input type="text" placeholder="write me"></label>
<br>
	<input type="text" name="名1" autocomplete="off" />
	<input type="text" name="名2" autocomplete="on" />
	<input type="text" name="名3" autocomplete="" />
<br>
	<input type="text" autofocus/>
<br>
	text : <input  name="名4" list="4">
	<datalist id="4">
		<option value="选项1">选项1</option>
		<option value="选项2">选项2</option>
		<option value="选项3">选项3</option>
	</datalist>

</form>
</body>
</html>

在这里插入图片描述