html5 表单新增元素与属性

最新推荐文章于 2023-07-18 21:59:07 发布

佛系小菜鸡

最新推荐文章于 2023-07-18 21:59:07 发布

阅读量157

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_40224261/article/details/104161524

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

表单内元素的form属性

可以将比如textarea 写在form外面，而不是一定要加在form里面

	<form id="testform">
			<input type="text" name="name" />
			<input type="submit" value="提交" formaction="提交地址1"/>
			<input type="submit" value="提交" formaction="提交地址2"/>
		</form>
		<textarea rows="30" cols="30" form="testform">
			
		</textarea>
	</body>

表单内元素的formaction属性

使用formaction属性可以实现多个按钮提交到不同的地址

<input type="submit" value="提交" formaction="提交地址1"/>
<input type="submit" value="提交" formaction="提交地址2"/>

表单内元素的formmethod属性

在HTML5中，可以使用formmethod属性来对每一个表单元素分别制定不同的提交方法

<input type="submit" value="提交" formaction="提交地址1" formmethod="get"/>
<input type="submit" value="提交" formaction="提交地址2" formmethod="post"/>

表单内元素的formenctype属性

在HTML4中，表单元素具有一个enctype尚需经，该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。
在HTML5中，可以使用formenctype属性对表单元素分别指定不同的编码方式

<!-- 纯文本的传输。空格转换为“+”，但不支持特殊字符编码。 -->
			<input type="submit" value="提交"  formenctype="text/plain"/>
			<!-- ：指定传输数据为二进制数据，例如图片、mp3、文件-->
			<input type="submit" value="提交" formenctype="multipart/form-data"/>
			<!-- 默认编码方式 -->
			<input type="submit" name="提交"  formenctype="application/x-www-form-urlencoded"/>
		</form>

表单内元素的formtarget属性

在HTML5中，可以对多个提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面

表单内元素的autofocus属性

为文本框、选择框和按钮控件加上autoocus属性，当画面打开时，该控件自动获得光标焦点

表单内元素的required属性

在HTML5中新增的required属性可以应用在大多数输入元素上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字

<input type="text" name="name" required="required"/>

表单内元素的labels属性（待写）

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<html>
	<body>
	
		<p>请点击文本标记之一，就可以触发相关控件：</p>
		
		<form>
		<label for="male">Male</label>
		<input type="radio" name="sex" id="male" />
		<br />
		<label for="female">Female</label>
		<input type="radio" name="sex" id="female" />
		</form>
	
	</body>
</html>