表单标签

最新推荐文章于 2024-05-14 21:30:37 发布

IT民工锦里

最新推荐文章于 2024-05-14 21:30:37 发布

阅读量123

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_44231964/article/details/106628518

版权

表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

1、input 输入表单元素
2、select 下拉表单元素
3、textarea 文本域元素

一、input标签用于收集用户信息—type属性

<input type="属性值"/>

```
 <input/>标签为单标签
```
type属性设置不同的属性值来指定不同的控件类型，属性值如下表

属性值	描述
button	定义可点击按钮，多数情况下可以用js来启动脚本
checkbox	定义复选框
file	定义输入字段和浏览按钮，供文件上传
hidden	定义隐藏字段
image	定义图像形式提交按钮
password	定义密码字段，该字段中的字符被遮掩
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会把表单中的数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本，默认长度为20个字符

input标签-----单标签----其他常用属性

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	定义input元素的值
checked	checked	规定input元素首次加载时应该被选中
maxlength	正整数	规定输入字段中字符的最大长度

演示：

<body>
	<from>
		性别 男 <input type="radio" name = "sex"> 女 <input type="radio" name = "sex"> 人妖 <input type="radio" name = "sex">
		/*此处使用了属性name来给每一个表单元素一个标识，
		当使用单选，和复选框时都要给表单元素加上name属性，否则就无法实现单选和复选，
		就比如说，选中了一个男，再选中女的时候，刚刚选中的男不会消失，这样就同时选中了2个，不符合要求*/
	</from>
</body>

注：value和name是每个表单元素都有的属性值，主要给后台人员使用

二、 label标签—双标签

主要想增加用户体验，不用点击的很准确，点击一定的区域就可以选择，类似于输入文本框，不用恰好点击文本框才可以输入文字，点击文本框周边的区域也可以输入文字

<label for="sex">男</label>
<input type = "radio" name ="xinbei"  id ="sex"/>
//label中的for属性应该和相关元素的id属性相同

三、select标签—双标签

在页面中如果有多个选项可供用户选择，并且想要节约页面空间时，我们可以选用select标签

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	.............
</select>

注：在 <option></option> 中添加selected= "selected"时，该选项就会被默认为选中状态

四、textarea标签—双标签

使用场景，当需要输入较多的文字的情况下，我们就不能使用文本框表单了，此时我们可以使用textarea，常见于留言板，反馈等等
该标签有2个属性
1、clos =“每行中的字符数”
2、rows = “显示的行数” ，但是在实际的开发中，我们都用css来改变大小，不需要记忆！！！

IT民工锦里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单标签

表单控件（表单元素）在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。1、input 输入表单元素2、select 下拉表单元素3、textarea 文本域元素一、input标签用于收集用户信息—type属性<input type="属性值"/> <input/>标签为单标签type属性设置不同的属性值来指定不同的控件类型，属性值如下表属性值描述button定义可点击按钮，多数情况下可以用js
复制链接

扫一扫