前端Form表单相关元素与属性的使用

最新推荐文章于 2024-02-16 18:32:49 发布

可及丶

最新推荐文章于 2024-02-16 18:32:49 发布

阅读量1.1k

点赞数 1

文章标签： HTML5表单的相关元素 Form 表单前端

本文链接：https://blog.csdn.net/qq_42128262/article/details/88781882

版权

表单的使用

form元素

form用于生成输入表单，但是该元素不会生成可视化部分，除了包含一些像id、style、class等通用属性外，还包含一下一些属性

action：当单击“确认”时，该表单被提交的地址，可以是相对地址，也可以是绝对地址
method：提交表单发送的请求，只有两种，一种为POST一种为GET
enctype：表单内容使用的编码支付集
name：表单的唯一名称，建议一般和id相同
target：指定使用哪一种方式打开URL，一般的指为_blank、_parent、_self、_top之一

其中action与method是必填属性

input元素

单行文本框：inputd 的type属性为text即可
密码输入框：inputd 的type属性为password即可
隐藏域：inputd 的type属性为hidden即可
单选框：inputd 的type属性为radio即可
复选框：inputd 的type属性为checkbox即可
图相框：inputd 的type属性为image即可，且此时可以为图像添加width与height
文件上传域：inputd 的type属性为file即可
提交、重设、无动作按钮：inputd 的type属性为submit、reset、button即可

这些表单控件除了有像id、class、style等通用属性外，还有一些其他属性

checked：该属性只有type为radio和checkbox时才可用，且属于Boolean值，当为true时，表示该单选框或者复选框已经被选中，否则未被选中
disabled：除type为hidden时，均可用，为Boolean值，当为true时，该元素首次加载时会被禁用，不响应任何操作，如无法获得焦点，无法点击，无法输入等
maxlength：为一个数值，表示该文本框所允许输入的最大字符数
readonly：也是Boolean值，当值为true时，该元素只能是可读的，不能输入，也不可修改
size：表示该元素的宽度，但type为hidden时，该值没有意义
src：指定type为image时可用，所显示图像的URL
width：指定type为image时可用，显示图像宽度
height：指定type为image时可用，显示图像高度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>input</title>
	</head>
	<body>
		<!--以下代码均按需求添加id name value等属性-->
		<form action="#" method="post">
			单行文本框：<input type="text" readonly="true"/></br>
			密码输入框：<input type="password" /></br>
			隐藏域：<input type="hidden" /></br>
			单选框：</br>
			男：<input type="radio" name="gender" />
			女：<input type="radio" checked="true" name="gender"/></br>
			复选框：</br>
			<input type="checkbox" checked="true"/>
			<input type="checkbox" checked="true"/></br>
			<!--此时图片为相对路径-->
			图像域：</br><input type="image" src="image.jpg" width="350" height="250"/></br>
			文件上传域：<input type="file" /></br>
			下面为四个按钮：<br>
			<input type="submit" value="提交"/>
			<input type="submit" value="提交" disabled="true" />
			<input type="reset" value="重置"/>
			<input type="button" value="无动作"/></br>
		</form>
	</body>
</html>

代码执行结果：
在这里插入图片描述

注：在input的type为radio时，必须指定两个radio的name属性相同，此时才能做到单选框只能选一个；不同的name属性的单选框之间互补干扰

使用label定义标签

label用于在表单元素中定义标签，对其他要求请求参数的空间元素加以说明，但label本书不需要参数请求，所以不要为label添加value属性

label虽然只是输出普通文本，但其生产的标签有一个额外作用：当用户单击label标签时，与该标签关联的控件将会会的焦点。即，当用户选择label标签时，浏览器将自动将焦点移动到该标签所关联的控件，这样，相较于直接在表单里面定义标签，更加的方便，提高用户的舒适度，更加的人性化

该标签有两种关联方式：

隐式使用for属性：该属性值为关联表单控件的id值
显示关联：即将普通文本，关联控件放在label标签内部即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>label</title>
	</head>
	<body>
		<!--以下代码均按需求添加id name value等属性-->
		<form action="#" method="post">
			<label for="name">单行文本框：</label>
			<input type="text" id="name" name="name" /><br/>
			<label>密码框：<input type="password" id="password" name="password"/></label><br/>
			未关联label的单行文本框：<input type="text"/><br/>
		</form>
	</body>
</html>

代码结果

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190325113011525.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTI4MjYy,size_16,color_FFFFF

上述代码结果中，第一个文本框和第二个密码框，都可以通过单击文本框前面的标签而获得焦点，而第三个只有通过单击文本框才能获得焦点，而点击前面的一行字，没有任何效果

button定义按钮

button由于定义一个按钮，在其内部可以包含普通文本、文本格式化标签、图像等内容，这也是button与input的区别

但是在button内部不可以定义图像映射因为其对鼠标键盘的敏感，会干扰到表单按钮的行为

button除了id、style、class等通用属性，也具有onclick等事件，除此之外，还有下列一些属性

disabled：指定是否禁用此按钮，其值只能是disabled，或者省略属性值
name：指定按钮的唯一名称，该属性应该与id保持一致
type：指定属于哪一种按钮，值只能是button、reset、submit之一
value：指定该按钮的初始值，可同过脚本进行修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>button</title>
	</head>
	<body>
		<!--以下代码均按需求添加id name value等属性-->
		<form action="#" method="post">
			<input type="text"/><br/><br/>
			<input type="text"/><br/><br/>
			<button type="button">提交</button><br/><br/>
			<button type="submit"><img src="image.jpg" width="20" height="15"></button><br/><br/>
			<button type="seset">重置</button><br/>
		</form>
	</body>
</html>

代码结果：

在这里插入图片描述
第一个第二个为普通文本框（前面已讲用处）

第三个为type="button"的button控件

第四个为type="submit"的控件，其中以图片形式作为按钮

第五个为type="reset"的button控件，表示重置，当鼠标左键单击时，与该按钮在一个表单内的所有输

入值，都将被重置

type=button 单纯是按钮功能；type=submit 是发送表单；submit提交表单，Button需
要绑定事件才可以用于提交数据

select与option元素

select用于创建列表框或者下拉菜单，且它必须与option元素结合使用，每一个option代表一个列表项或者菜单项

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> select元素 </title>
</head>
<body>
<form action="#" method="post">
	下面是简单下拉菜单：<br />
	<select id="skills" name="skills">
		<option value="java">Java</option>
		<option value="c">C</option>
		<option value="ruby">Ruby</option>
	</select><br /><br /><br />
	下面是允许多选的列表框：<br />
	<select id="books" name="books" 
		multiple="multiple" size="4">
		<option value="java">Java</option>
		<option value="android">Android</option>
		<option value="ee">Java EE</option>
	</select><br />
	下面是允许多选的列表框：<br />
	<select id="leegang" name="leegang" 
		multiple="multiple" size="6">
		<optgroup label="Java">
			<option value="java">Java</option>
			<option value="android">Android</option>
			<option value="ee">Java EE</option>
		</optgroup>
		<optgroup label="其他图书">
			<option value="C++">C++程序设计</option>
			<option value="C#">C#程序设计</option>
		</optgroup>
	</select><br />
	<button type="submit"><b>提交</b></button><br />
</form>
</body>
</html>

执行结果：

在这里插入图片描述

从代码可以看出，每个列表项，也就是一个option通常包含两个文本，其中一个是其value值，另一个是option标签之间的内容，即每个选项的文本内容

HTML5新增的textarea

textarea即多行文本域，其包含以下属性：

cols：必填，指定文本域宽度
rows：必填指定文本域高度
disabled：设置禁用该文本域，属性值只能是disabled
readonly：设置只读文本域，属性值只能是readonly
maxlength：设置多行文本域最多可输入的字符
warp：指定文本域是否添加换行符

与单行文本框不同的区别：textarea不能指定value属性textarea标签之间的文本作为请求参数值

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 多行文本域 </title>
</head>
<body>
<form action="#" method="post">
	简单多行文本域：<br />
	<textarea name="txt1" cols="20" rows="2"></textarea><br />
	只读的多行文本域：<br />
	<textarea name="txt2" cols="28" rows="4" readonly>
Java
Android
	</textarea><br />
	<button type="submit"><b>提交</b></button><br />
</form>
</body>
</html>

执行结果：

在这里插入图片描述

HTML5新增的表单属性：form

在以前，所有的表单元素都要放在form内部，用来表示该元素属于该表单，在HTML5新增了form属性后，只需要设置控件的form属性等于表单的id即可达到原先的效果

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> form属性 </title>
</head>
<body>
<form id="addForm" action="#">
	物品名：<input type="text" name="name"/>
	<input type="submit" value="添加"/>
</form>
物品描述：<textarea name="desc" form="addForm"></textarea>
</body>
</html>

结果：

在这里插入图片描述
上述代码中，主要点击“添加”该多行文本域也将生成参数请求

form属性使表单控件更加的灵活，可以随意放置、排列表单控件，为页面布局提供了更大的灵活性，且大多数浏览器都支持

可及丶

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端Form表单相关元素与属性的使用

表单的使用form元素form用于生成输入表单，但是该元素不会生成可视化部分，除了包含一些像id、style、class等通用属性外，还包含一下一些属性 action method enctype name target...
复制链接

扫一扫