本文介绍了HTML中标签的各种type属性，包括文本框、密码输入、单选按钮、复选框、下拉列表等，并详细讲解了相关属性如name、value、maxlength等的用法，还涉及了textarea和select+option的使用，旨在帮助读者掌握前端开发中表单元素的创建方法。
简介：本篇文章总结了如何用html语言<input>标签的多种属性创建表单，包括输入框、密码输入框、单选按钮、下拉列表等等。
文章目录
前言
在前端开发的过程中我们一定少不了接触表单。表单随处可见，比如我们在平时注册一个APP成为新用户的时候，我们就需要在输入框内输入自己的“昵称”、“密码”、“邮箱”，通过下拉列表选择自己的城市地区等等。这些用来接收外界信息的小部件都是由<input>标签来实现的。接下来就让我们来学习input标签，textarea标签创建文本输入区域，还有select配合option创建下拉式表单的使用方法。
一、input标签
1.type不同的取值对应的不同表单类型
首先让我们整理一下不同type值对应的不同表单类型。
| type值 | 表单类型 |
|---|---|
| text | 单行文本框 |
| passworld | 密码文本框 |
| button | 按钮 |
| reset | 重置按钮 |
| image | 图像形式的提交按钮 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| hidden | 隐藏字段 |
| file | 文件上传 |
| type值 | 表单类型 |
|---|---|
| url | 输入url字段 |
| tel | 输入电话号码 |
| search | 搜索字符串 |
| 用于输入邮箱地址，如果输入的非邮箱地址，则支持html5的浏览器将认为其不合法 | |
| color | 颜色选择器，自动调用系统的颜色调节窗口 |
| number | 用于输入数字，可人为规定输入的最大和最小值 |
| range | 输入精确值不重要的数字 |
| date | 用于输入年月日，跳出选择界面供用户选择 |
| month | 年月控件 |
| datetime | 日期加时间控件 |
2.input标签的基本控制属性
- name属性：给出当前input表单的名字。
- value属性：表示该input表单的默认值。
1）当input type=“text”、“password”、"hidden"时，value中的值会成为其输入框的初始值；
2）当input type=“button”、“reset”、"submit"时，定义按钮上的显示的文本；
3）当input type=“checkbox”、“radio”、"image"时，定义与输入相关联的值；
注意：input type="checkbox"和input type="radio"中必须设置value属性；value属性无法与input type="file"一通使用。 - style属性：为input元素设置简单的CSS样式。
- width属性：当input type="image"时，通过width属性控制元素的宽度；
- height属性：当input type="image"时，通过height属性控制元素的高度；
- maxlength属性：定义input元素中可输入的最长字符数。
3.常见type举例分析
- type=“text”:创建单行文本输入框。
<div>
昵称：<input type="text" name="Name" value="" maxlength="10">
</div>
在使用input创建单行文本输入框的时候，name表示input该输入框的名字，value表示用户在没有输入任何东西的时候，其输入框内默认存在的值，maxlength表示该输入框内最多输入的文字数量。
效果图：
- type=“password”:创建密码输入框。
<div>
密码：<input type="password" name="Passcode" value="" maxlength="30">
</div>
对于密码输入框的属性特征其实和text差不多，不再赘述。主要的表现区别主要在输入内容之后页面的显示上。众所周知，密码属于一个人的隐私，是需要重点保护的，所以这个组件创建之后长这样：
- type=“radio”:创建单选按钮。
<!--对于单选按钮来说，具有相同名字的单选按钮表示同一组，同时只能有一个被选中-->
<!--check标注的单选框是初始默认的选项-->
<div>
性别:
<input type="radio" value="man" name="sex" checked>男
<input type="radio" value="women" name="sex">女
</div>
在单选按钮的创建中，value值表示用户选中选项后提交到数据库中的值，name值是该单选按钮控件的名称。对于所有相同name的控件，能且仅能选中其中的一个选项。被标注checked的那一个input为初始默认选中的项，相同name的单选按钮仅能标注一个。
效果图：
- type=“checkbox”:创建复选框。
<!-- 使用label标签把文字和对应的输入框相关联， -->
<!-- 从而用户选择该选项不需要一定得鼠标点在选项上， -->
<!-- 而是可以点在label圈起的文字部分，也可以选择该选项。从而增大了用户的鼠标操作范围。 -->
<div>
兴趣：
<input type='checkbox' id="travel" name="travel"> <label for="travel">旅游</label>
<input type='checkbox' id="photo" name="photo"><label for="photo">摄影</label>
<input type="checkbox" id="draw" name="draw"><label for="draw">绘画</label>
</div>
当input的类型是复选框的时候，用户可以选择多个选项。这边需要单独指出的是对<label>标签的应用。如果不使用label标签，那么用户在选择这个选项的时候，鼠标必须点击到方框才能选上，而如果使用该标签，则可以将label中的内容和对应id的input绑定，用户点到文字便可以选上，大大增加了方便性和舒适性。
效果图：
- type=“file”:文件上传。
<input type='file'>
效果就是用户可以点击按钮，上传文件。（在点击按钮的时候会自动跳出文件夹让用户选择本地文件上传）
选择好文件后旁边会显示用户选择的文件是什么。
- type=“color”:创建颜色选择器。
<input type="color">
然后页面上会对应出现这个：电脑自动调用系统的颜色选择器，让用户选择颜色。（默认值为黑色）
- type=“number”:输入数字。
<input type="number" name="number" min="20" max="30" value="23" />
value是一开始的默认值，在该代码中可以指定允许出现的数字的最大值max和最小值min，对应到页面上会出现一个数字选择器，用户可以通过上下箭头在指定范围内调整值的大小。
- type=“date”：输入日期。
<div>
出生日期：
<input type="date" min="1990-01-01" max="2022-01-01" />
</div>
可以通过min和max设定日期允许选择的范围。
效果如下图，会出现一个类似日历的东西供用户输入日期：
二、textarea标签创立多行文本框
语法：
<textarea rows=“行数” cols=“列数”>多行文本框内容</textarea>
<textarea name="introduction" id="introduction" cols="30" rows="10"></textarea>
效果图：
三、select和option创建下拉式表单
<select>
<option value="1" selected="selected">qq.com</option>
<option value="2">163.com</option>
<option value="3">tongji.edu.cn</option>
</select>
selected标注默认选中的内容。
四、<fieldset>和<legend>标签增强语义性
根据W3C标准，html5是非常注重代码以及标签的语义性的，因此，在创建表单的时候我们往往要使用<fieldset>和<legend>标签来给她加一个框，从而使得页面看上去更加自成一体，可读性更强。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单学习</title>
<!--<link rel="shortcut icon" type="image/x-icon" href="../icon/favicon.ico"/>-->
</head>
<body>
<div>
<!-- 使用fieldset和legend标签可以给表格自添边框，从而让表单更加美观 -->
<fieldset>
<legend>个人信息</legend>
昵称：<input type="text" name="Name" value="" maxlength="10"><br/><!--这里的br标签事实上用的是错误的，因为br的语义是用于在p标签内换行-->
密码：<input type="password" name="Passcode" value="" maxlength="30"><br/>
邮箱：<input type="email">
<select>
<option value="1" selected="selected">qq.com</option>
<option value="2">163.com</option>
<option value="3">tongji.edu.cn</option>
</select><br/>
出生日期：<input type="date" min="1990-01-01" max="2022-01-01" /><br>
<!--对于单选按钮来说，具有相同名字的单选按钮表示同一组，同时只能有一个被选中-->
<!--check标注的单选框是初始默认的选项-->
性别: <input type="radio" name="sex" checked>男 <input type="radio" name="sex">女<br>
<!-- 使用label标签把文字和对应的输入框相关联， -->
<!-- 从而用户选择该选项不需要一定得鼠标点在选项上， -->
<!-- 而是可以点在label圈起的文字部分，也可以选择该选项。从而增大了用户的鼠标操作范围。 -->
兴趣：<input type='checkbox' id="travel" name="travel"> <label for="travel">旅游</label>
<input type='checkbox' id="photo"><label for="photo">摄影</label>
<input type="checkbox" id="draw"><label for="draw">绘画</label><br>
个人介绍：<br>
<textarea name="introduction" id="introduction" cols="30" rows="10"></textarea>
<br>
<button>注册</button><br>
上传个人照片<br>
<input type='file'>
</fieldset>
</div>
</body>
效果图：
总结
以上便是我在学习过程中整理的不同表单的创建方式，有input标签，textarea标签创建文本输入区域，还有select配合option创建下拉式表单。参考博客如下所示：
https://blog.csdn.net/wuyxinu/article/details/103515157
如有补充欢迎提出！
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
