在html中常用的表单有哪些，他们的写法又有什么不同呢？
在我们的生活中，form表单无处不在，比如我们在登录账号或者注册账号的时候，你填写信息的框就是表单的一种。
表单元素有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属性，这样才能实现单选的效果；
在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>
效果图：
这样是不是好看多啦，你也可以尝试一下设置你心目中的样式，今天分享就到这里，如有不懂请留言，谢谢！