在html中常用的表单有哪些，他们的写法又有什么不同呢？

最新推荐文章于 2025-04-05 21:51:03 发布

玖.儿

最新推荐文章于 2025-04-05 21:51:03 发布

阅读量3.1k

点赞数 3

CC 4.0 BY-SA版权

文章标签：表单

本文链接：https://blog.youkuaiyun.com/weixin_44484756/article/details/86634738

本文详细介绍了HTML中的表单元素，包括form表单、input表单项、select和option下拉表单、textarea文本域等，解释了它们的写法及如何设置样式。

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

在html中常用的表单有哪些，他们的写法又有什么不同呢？

在我们的生活中，表单无处不在，比如我们在登录账号或者注册账号的时候，你填写信息的框就是表单的一种。
表单元素有form表单、input表单项、select和option下拉表单、textarea文本域。
正如下图，下图每一项需要填写的框都属于表单，有文本框、单选框、复选框、下拉框、文本域等等。
在这里插入图片描述
接下来让我们来一个一个地了解一下表单的写法：
1.form表单

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
	<form action="">
		姓名：<input type="text">
	</form>
</body>
</html>

action：表示当前表单的内容提交到那个页面进行处理
（效果图如图一）

2.input表单项

input属性取值	作用
type=“text”	显示当行文本输入框
type=“password”	显示密码框
type=“radio”	显示单选框
type=“checkbox”	显示复选框
type=“file”	显示文件域
type=“submit”	将表单信息提交到表单属性action所指向的文件
type=“reset”	将表单信息清空，重新填写
type=“button”	按钮

<div class="controls">
	<span>密码：</span>
	<input type="password">
</div>
<div class="controls">
	<span>性别称谓：</span>
	<input type="radio" name="result" checked>男
	<input type="radio" name="result">女
</div>
<div class="controls">
	<span>爱好：</span>
	<input type="checkbox">篮球
	<input type="checkbox">跑步
</div>
<input type="submit" value="提交" class="submit">
<div class="controls">
	<label for="input_file" class="file">添加附件</label>
	<input type="file" id="input_file" hidden="hidden">
</div>

（效果图如图一）
注：要实现单选框，必须在input元素中加name属性，并且加同一个name属性，这样才能实现单选的效果；
checked是一个默认值选中的意思，加checked会自动帮你选中当前元素；
在file文件域中，label元素中的for属性是用来关联对应的表单，而关联则需要在对应表单中加入id，通过id来关联，hidden属性是将input元素隐藏起来。

3.select和option下拉表单
所谓的下拉框是需要在select元素中嵌套option元素

<div class="controls">
	<label for="">所在地区：</label>
	<select name="" id="">
		<option value="">北京</option>
		<option value="">广东</option>
		<option value="">四川</option>
		<option value="">湖南</option>
	</select>
</div>

（效果图如图一）

4.textarea文本域

<div class="controls">
	<span>个人简介：</span>
<!--			cols是文本域的宽度，rows是文本域的高度-->
	<textarea name="" id="" cols="50" rows="5"></textarea>
</div>

好了，到这里的常用表单就介绍完了，大家是不是觉得上面的样式好丑，下面介绍一下它们要怎么设置样式，主要是input元素的样式该怎么设置，通过用类来设置样式是没有效果的，需要通过 input[type=‘text’]来设置。

<style>
	.controls{
		/*上下的内边距为7个像素，左右0个像素*/
		padding: 7px 0px; 
	}
	.controls span{
		float: left; /*给每个span标签设置左浮动，使其并排显示*/
	}
	input[type='text'],input[type='password']{
		/*设置背景颜色，把边框去掉，重新设置边框的样式，一个像素的实线*/
		background: #f6f8fa;
		border:none; 
		border:1px solid #c9c9c9;
	}
	.controls textarea{
		background: #f6f8fa;
	}
	.file,.submit{
		display: inline-block;
		width:70px;
		height:40px;
		line-height: 40px;
		text-align:center;
		font-size: 13px;
		border-radius: 5px;
		color: #fff;
		background:#6897E9;
	}
	.submit{
		border:none;
	}
</style>

效果图：
在这里插入图片描述
这样是不是好看多啦，你也可以尝试一下设置你心目中的样式，今天分享就到这里，如有不懂请留言，谢谢！