Web学习笔记2021-04-30

最新推荐文章于 2021-12-01 08:24:14 发布

xiexinxia

最新推荐文章于 2021-12-01 08:24:14 发布

阅读量297

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.youkuaiyun.com/xieixnxia/article/details/116308938

版权

笔记专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了HTML中的表单元素，包括form、input、textarea、select和option标签。讲解了单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多行文本框和下拉列表的使用方法，强调了name和value属性的重要性，以及如何使用checked属性设置默认状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单

表单标签

在HTML中有五种标签：form、input、textarea、select和option。

从外观上划分，表单可分为八种：

单行文本框
密码文本框
单选框
复选框
按钮
文件上传
多行文本框
下拉列表

form标签

input、textarea、select、option都是表单标签，必须放入form标签内

form标签属性
属性值	说明
name	表单名称
method	提交方式
action	提交地址
target	打开方式
enctype	编码方式

input标签

在HTML中，大多数表单都是用input标签来实现的。input时自闭合标签，没有结束符。

input标签的type属性取值
属性值	说明
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
button或submit或reset	按钮
file	文件上传

单行文本框

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
</head>
<body>
	<form method="post">
		姓名：<input type="text" />
	</form>

</body>
</html>

单行文本框常用属性
属性	说明
value	设置文本框的默认值，也就是默认情况下文本框显式的文字
size	设置文本框的长度
maxlength	设置文本框中最多可以输入的字符数

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
</head>
<body>
	<form method="post">
		姓名：<input type="text" size="40" /><br>
		姓名：<input type="text" value="鹿晗"/><br>
		姓名：<input type="text" maxlength="5">
	</form>
</body>
</html>

密码文本框

密码文本框在外观上与单行文本狂相似，两者本之上的区别为：在单行文本框中输入的字符可见，而在密码文本框中输入的字符不可见。

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
</head>
<body>
	<form method="post">
		账号：<input type="text" /><br>
		密码：<input type="password" />
	</form>
</body>
</html>

单选框

在HTML中，单选框也是使用input标签来实现，其中type属性值取值为radio。

checked属性可实现默认选中。

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
</head>
<body>
	<form method="post">
		<input type="radio" name="gender" value="男"/>男
		<input type="radio" name="gender" value="女"/>女
	</form>
</body>
</html>

在单选框中，必须加上name属性，且在同一组单选框中name必须设置相同的值，否则都可被同时选中。

复选框

在HTML中，复选框也是使用input标签来实现的，其中type属性值为checkbox。单选框只能选择一样，而复选框可以选择多项。

name属性表示复选框所在的组名，而value表示复选框的值。单选框一样，这两个也必须要设置。

如果想在默认情况下，让复选框某几项选中，我们也可以使用checked属性来实现。

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
</head>
<body>
	<form method="post">
		你喜欢的水果：<br>
		<input type="checkbox" name="fruit" value="苹果" checked>苹果
		<input type="checkbox" name="fruit" value="草莓" >草莓
		<input type="checkbox" name="fruit" value="芒果" checked>芒果
		<input type="checkbox" name="fruit" value="西瓜" >西瓜

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

按钮

在HTML中，常见的按钮有三种：普通按钮button、提交按钮submit和重置按钮reset。

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
</head>
<body>
	<form method="post">
		<input type="button" value="普通按钮"><br>
		账号：<input type="text"><br>
		密码：<input type="password"><br>
		<input type="submit" value="提交">
		<input type="reset" value="重置">

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

三种按钮功能上的区别：

普通按钮一般情况下都是配合Javascript来进行各种操作的；
提交按钮一般都是用来给服务器提交数据的；
重置按钮一般都是用来清除用户在表单上输入的内容。

文件上传

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
</head>
<body>
	<form method="post">
		<input type="file">

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

多行文本框

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
</head>
<body>
	<form method="post">
		个人简历：<br>
		<textarea rows="5" cols="20">请介绍一下你自己</textarea>

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

下拉列表

在HTML中，下拉列表由select和option这两个标签配合使用来表示。

select标签常用属性
属性	说明
multiple	设置下拉列表可以选择多项
size	设置下拉列表显示几个列表项，取值为整数

option标签属性
属性	说明
selected	是否选中
value	选项值

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
</head>
<body>
	<form method="post">
		<select multiple>
			<option selected>HTML</option>
			<option>CSS</option>
			<option>JavaScript</option>
			<option>JQuery</option>
			<option>HTML5</option>
			<option>CSS3</option>
			<option>Vue.js</option>
			
		</select>

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

课后习题练习

<!DOCTYPE html>
<html>
<head>
	<title>白鹿为霜</title>
</head>
<body>
	<form method="post">
		昵称：<input type="text"><br>
		密码：<input type="text"><br>
		邮箱：<input type="text"><select>
			<option>qq.com</option>
			<option>163.com</option>
		</select><br>
		性别：<input type="radio" name="gender" value="男" checked>男
		<input type="radio" name="gender" value="男">男<br>
		爱好：<input type="checkbox" name="hobby" value="旅游">旅游
		<input type="checkbox" name="hobby" value="摄影">摄影
		<input type="checkbox" name="hobby" value="运动">运动<br>
		个人简介：<br>
		<textarea rows="6" cols="10"></textarea><br>
		上传个人照片：<br>
		<input type="file" value="选择文件"><br>
		<hr>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="立即注册" >


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