分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html5新增的表单属性，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_801_6@html5中新增了一些表单的属性，能够省去开发者写javascript的麻烦，表单的扩展性得到很大的提高。常用的属性介绍如下：

@H_801_6@1、from

@H_801_6@在H5中，input的内容可以不在form标签的里面，通过form标签的id来指定input对应的表单。在一个界面中含有多个表单的场景中经常用到。

	<form id="test-form" action="aaa.PHP"></form>
	<form id="test-form2" action="bbb.PHP"></form>
	<input form="test-form" type="text">
	<input form="test-form" type="submit" value="提交">
	
	<input form="test-form2" type="text">
	<input form="test-form2" type="submit" value="登录">

@H_801_6@2、formaction与formmethod

@H_801_6@在H5中，通过指定<input type="submit">的formaction和formmethod属@L_674_9@够指定表单提交的地址和方法。（在H5之前，为了提交到不同的表单，一般的做法是给<input type="submit">写上不用的name值，提交到后台后，根据name值再进行逻辑处理。）

	<form id="test-form"></form>
	<input form="test-form" name="username" type="text" >
	<input form="test-form" formmethod="get" formaction="update.PHP" value="修改" type="submit">
	<input form="test-form" formmethod="get" formaction="delete.PHP" value="删除" type="submit">
	<input form="test-form" formmethod="post" formaction="drop.PHP" value="彻底删除" type="submit">

@H_801_6@3、placeholder

@H_801_6@placeholder属性在input未输入任何value的时候，显示默认的提示字段，比如下面：

	<form id="test-form"></form>
	<input placeholder="请输入用户名" form="test-form" name="username" type="text">

@H_801_6@4、autofocus

@H_801_6@input标签的autofocus属@L_674_9@在表单页面打开的时候，直接让该input标签获得焦点。（方便用户输入）

	<form id="test-form"></form>
	<input form="test-form" autofocus="true" name="username" type="text">

@H_801_6@5、autocomplete

@H_801_6@autocomplete属性有利于提高表单的安全性，在H5标准之前，用户在浏览器输入的表单的内容是会自动提示的。（比如你在某个网站的目录下输入过一些内容：admin,administer，当别人用你的浏览器输入表单时，如果敲了个a，他就能看到你之前输入的admin和administer，这对于用户来说是很危险的）用了autocomplete属性之后能够避免这种情况：（如果想开启，则把autocomplete设置为on）

	<form id="test-form"></form>
	<input form="test-form" autocomplete="off" name="username" type="text">

@H_801_6@6、list

@H_801_6@list属性需要配合datalist标签来使用。令list等于指定datalist的id，可以让用户从datalist中选择，类似于SELEct标签：

	<form id="test-form"></form>
	<input form="test-form" list="city" autocomplete="off" name="username" type="text">
	<br>
	<input form="test-form" formmethod="get" formaction="test.PHP" type="submit" value="提交">
	<datalist id="city">
		<option>上海</option>
		<option value="beijing">北京</option>
		<option>深圳</option>
		<option>广州</option>
	</datalist>

@H_801_6@注：如果不指定option的value属性，则name=username的input标签的value值是option标签中的值，像上面指定了value="beijing"，则input选择北京时，发送的value其实是beijing