HTML（五）表单

最新推荐文章于 2021-10-14 13:10:30 发布

Insane_Loafer

最新推荐文章于 2021-10-14 13:10:30 发布

阅读量121

点赞数 1

分类专栏： Python全栈 HTML 文章标签： html css

本文链接：https://blog.csdn.net/m0_48978908/article/details/120564717

版权

Python全栈同时被 2 个专栏收录

192 篇文章 26 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

表单

作用：用于收集用户信息，进行人机交互操作
包含元素：文本框、单选按钮、列表框、图片框、复选框等。这些元素，统称"控件"
示例：

控件的常用属性

在这里插入图片描述

name名字允许重复代表一组操作，且用于前端
id名字不允许重复，且用于后端
例子

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>表单</title>
</head>
<body>
	<form action="" method="">
		<label>请输入姓名：</label>
			<input type="text" name="" id=""><br>
		<label>请输入密码：</label>
			<input type="password" name="" id=""><br>
		<label>再次输入密码：</label>
			<input type="password" name="" id=""><br>
		<label>性别：</label>
			<input type="radio" name="sex" id="" value="男">
				<label>男</label>
			<input type="radio" name="sex" id="" value="女">
				<label>女</label><br>
		<label>兴趣爱好</label>
			<input type="checkbox" name="" id="" value="游泳">
				<label>游泳</label>
			<input type="checkbox" name="" id="" value="看书">
				<label>看书</label>
			<input type="checkbox" name="" id="" value="爬山">
				<label>爬山</label>
			<input type="checkbox" name="" id="" value="思考">
				<label>思考</label><br>
		<label>生日：</label>
			<select>
				<option value="1995">1995</option>
				<option value="1996">1996</option>
				<!--默认选中-->
				<option value="1997" selected="selected">1997</option>
				<option value="1998">1998</option>
				<option value="1999">1999</option>
				<option value="2000">2000</option>
			</select>年
			<select>
				<option value="1">01</option>
				<option value="2">02</option>
				<option value="3">03</option>
				<option value="4">04</option>
			</select>月
			<select>
				<option value="1">01</option>
				<option value="2">02</option>
				<option value="3">03</option>
				<option value="4">04</option>
			</select>日<br>
			头像<img src="image/headlogo/3.jepg">
			<select>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
			</select><br>
			<input type="button" name="普通按钮">
			<!--submit提交按钮会进入后台-->
			<input type="submit" name="提交按钮">
	</form>

</body>
</html>

表单其他控件

普通列表框（非下拉列表框)
隐藏域
上传控件
多行文本框

多行文本框

<textarea rows="5" cols="30" name="" id="">请输入</textarea>

在这里插入图片描述

上传

<input type="file" name=""><input type="button" name="" value="上传">

在这里插入图片描述

隐藏域（隐藏文本框）

000<input type="hidden" name="" id="">000

主要作用是信息传递，比如前段的信息不方便显示，但是要后端得到，或者后台的数据要在前端得到

普通文本框

能够展示所有选项
size：指定能够展示的选项数
multiple：指定多选数目

	<select size="4" multiple="4">
			<option value="1">01</option>
			<option value="2">02</option>
			<option value="3">03</option>
 			<option value="4">04</option>
 			<option value="5">05</option>
	</select>

在这里插入图片描述

Insane_Loafer

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML（五）表单

表单作用：用于收集用户信息，进行人机交互操作包含元素：文本框、单选按钮、列表框、图片框、复选框等。这些元素，统称"控件"示例：控件的常用属性name名字允许重复代表一组操作，且用于前端id名字不允许重复，且用于后端例子<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>表单</title></head><body&g
复制链接

扫一扫

专栏目录