【零基础网页开发】第十六课 form表单常用元素

最新推荐文章于 2022-02-10 13:38:45 发布

ALeSoleil

最新推荐文章于 2022-02-10 13:38:45 发布

阅读量188

点赞数

分类专栏：笔记文章标签： 1024程序员节 html

本文链接：https://blog.csdn.net/weixin_45582129/article/details/109251187

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、表单作用

1. 主要功能

用来提交用户信息给服务器。

2. 存放标签

（1）input type 各种类型，如单选框、多选框
（2）select option下拉列表
（3）textarea 文本域，可以多行
（4）button 按钮

3. 提交内容

其提交的是内部带有name标签的元素给action对应的页面。

4. 数据提交方式：

（1）post：可以提交大量的数据；
（2）get：提交数据较少。

二、css

1. text-align: center：

控制标签内部居中。

2. 使用 “，” 同时设置多个元素：

.wrapper form input.txt, .wrapper form select{
	width: 300px;
	height: 30px;
	margin: 5px;
}

三、radio单选框

1. name属性值：

相同则表示 同一组 ，不可以被同时勾选。

四、项目代码

注：新建了一个名为data的目录，里面新建了一个reg.php文件

1. index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>form 1023</title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
	</head>
	<body>
		<div class="wrapper">
			<h1>注册信息</h1>
			<form action="data/reg.php" method="post">
				帐号：<input class="txt" type="text" name="un" id="un" value="" placeholder="注册用户名"/>
				<br/>
				密码：<input class="txt" type="password" name="pwd" id="pwd" value="" placeholder="输入密码"/>
				<br/>
				国家：
				<select name="country">
					<option value ="cn">中国</option>
					<option value ="usa">美国</option>
					<option value ="uk">英国</option>
				</select>
				<br/>
				性别：
				<input class="op" type="radio" name="sex" id="sex_m" value="male" />男
				<input class="op" type="radio" name="sex" id="sex_f" value="female" />女
				<br/>
				爱好：
				<input class="op" type="checkbox" name="hobby" value="1" />sing
				<input class="op" type="checkbox" name="hobby" value="1" />dance
				<input class="op" type="checkbox" name="hobby" value="1" />reading
				<br/>
				<input class="sub" type="submit" value="提 交"/>
			</form>
		</div>
	</body>
</html>

2. main.css

.wrapper{
	width: 400px;
	padding: 10px;
	margin: auto;
	border: 1px solid #ccc;
}
.wrapper h1{
	text-align: center;  /* 标签内部居中 */
}
.wrapper form input.txt, .wrapper form select{
	width: 300px;
	height: 30px;
	margin: 5px;
}
.wrapper input.op{
	width: 15px;
	margin: 5px;
}
.wrapper .sub{
	margin-top: 10px;
	width: 100%;
	height: 30px;
}