简介：本篇文章总结了如何用html语言<input>标签的多种属性创建表单，包括输入框、密码输入框、单选按钮、下拉列表等等。
文章目录
前言
在前端开发的过程中我们一定少不了接触表单。表单随处可见，比如我们在平时注册一个APP成为新用户的时候，我们就需要在输入框内输入自己的“昵称”、“密码”、“邮箱”，通过下拉列表选择自己的城市地区等等。这些用来接收外界信息的小部件都是由<input>标签来实现的。接下来就让我们来学习input标签，textarea标签创建文本输入区域，还有select配合option创建下拉式表单的使用方法。
一、input标签
1.type不同的取值对应的不同表单类型
首先让我们整理一下不同type值对应的不同表单类型。
input标签type值对应的不同表单
type值表单类型text单行文本框passworld密码文本框button按钮reset重置按钮image图像形式的提交按钮radio单选按钮checkbox复选框hidden隐藏字段file文件上传 html5版本在原来的基础上又新增了以下基础控件：
html5新增input type属性
type值表单类型url输入url字段tel输入电话号码search搜索字符串email用于输入邮箱地址，如果输入的非邮箱地址，则支持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>
昵称：<inputtype="text"name="Name"value=""maxlength="10"></div>
在使用input创建单行文本输入框的时候，name表示input该输入框的名字，value表示用户在没有输入任何东西的时候，其输入框内默认存在的值，maxlength表示该输入框内最多输入的文字数量。
效果图：
- type=“password”:创建密码输入框。
<div>
密码：<inputtype="password"name="Passcode"value=""maxlength="30"></div>
对于密码输入框的属性特征其实和text差不多，不再赘述。主要的表现区别主要在输入内容之后页面的显示上。众所周知，密码属于一个人的隐私，是需要重点保护的，所以这个组件创建之后长这样：
- type=“radio”:创建单选按钮。
<!--对于单选按钮来说，具有相同名字的单选按钮表示同一组，同时只能有一个被选中--><!--check标注的单选框是初始默认的选项--><div>
性别:
<inputtype="radio"value="man"name="sex"checked>男
<inputtype="radio"value="women"name="sex">女
</div>
在单选按钮的创建中，value值表示用户选中选项后提交到数据库中的值，name值是该单选按钮控件的名称。对于所有相同name的控件，能且仅能选中其中的一个选项。被标注checked的那一个input为初始默认选中的项，相同name的单选按钮仅能标注一个。
效果图：
- type=“checkbox”:创建复选框。
<!-- 使用label标签把文字和对应的输入框相关联， --><!-- 从而用户选择该选项不需要一定得鼠标点在选项上， --><!-- 而是可以点在label圈起的文字部分，也可以选择该选项。从而增大了用户的鼠标操作范围。 --><div>
兴趣：
<inputtype='checkbox'id="travel"name="travel"><labelfor="travel">旅游</label><inputtype='checkbox'id="photo"name="photo"><labelfor="photo">摄影</label><inputtype="checkbox"id="draw"name="draw"><labelfor="draw">绘画</label></div>
当input的类型是复选框的时候，用户可以选择多个选项。这边需要单独指出的是对<label>标签的应用。如果不使用label标签，那么用户在选择这个选项的时候，鼠标必须点击到方框才能选上，而如果使用该标签，则可以将label中的内容和对应id的input绑定，用户点到文字便可以选上，大大增加了方便性和舒适性。
效果图：
- type=“file”:文件上传。
<inputtype='file'>
效果就是用户可以点击按钮，上传文件。（在点击按钮的时候会自动跳出文件夹让用户选择本地文件上传）
选择好文件后旁边会显示用户选择的文件是什么。
- type=“color”:创建颜色选择器。
<inputtype="color">
然后页面上会对应出现这个：电脑自动调用系统的颜色选择器，让用户选择颜色。（默认值为黑色）
- type=“number”:输入数字。
<inputtype="number"name="number"min="20"max="30"value="23"/>
value是一开始的默认值，在该代码中可以指定允许出现的数字的最大值max和最小值min，对应到页面上会出现一个数字选择器，用户可以通过上下箭头在指定范围内调整值的大小。
- type=“date”：输入日期。
<div>
出生日期：
<inputtype="date"min="1990-01-01"max="2022-01-01"/></div>
可以通过min和max设定日期允许选择的范围。
效果如下图，会出现一个类似日历的东西供用户输入日期：
二、textarea标签创立多行文本框
语法：
<textarea rows=“行数” cols=“列数”>多行文本框内容</textarea><textareaname="introduction"id="introduction"cols="30"rows="10"></textarea>
效果图：
三、select和option创建下拉式表单
<select><optionvalue="1"selected="selected">qq.com</option><optionvalue="2">163.com</option><optionvalue="3">tongji.edu.cn</option></select>
selected标注默认选中的内容。
四、<fieldset>和<legend>标签增强语义性
根据W3C标准，html5是非常注重代码以及标签的语义性的，因此，在创建表单的时候我们往往要使用<fieldset>和<legend>标签来给她加一个框，从而使得页面看上去更加自成一体，可读性更强。
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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>
昵称：<inputtype="text"name="Name"value=""maxlength="10"><br/><!--这里的br标签事实上用的是错误的，因为br的语义是用于在p标签内换行-->
密码：<inputtype="password"name="Passcode"value=""maxlength="30"><br/>
邮箱：<inputtype="email"><select><optionvalue="1"selected="selected">qq.com</option><optionvalue="2">163.com</option><optionvalue="3">tongji.edu.cn</option></select><br/>
出生日期：<inputtype="date"min="1990-01-01"max="2022-01-01"/><br><!--对于单选按钮来说，具有相同名字的单选按钮表示同一组，同时只能有一个被选中--><!--check标注的单选框是初始默认的选项-->
性别: <inputtype="radio"name="sex"checked>男 <inputtype="radio"name="sex">女<br><!-- 使用label标签把文字和对应的输入框相关联， --><!-- 从而用户选择该选项不需要一定得鼠标点在选项上， --><!-- 而是可以点在label圈起的文字部分，也可以选择该选项。从而增大了用户的鼠标操作范围。 -->
兴趣：<inputtype='checkbox'id="travel"name="travel"><labelfor="travel">旅游</label><inputtype='checkbox'id="photo"><labelfor="photo">摄影</label><inputtype="checkbox"id="draw"><labelfor="draw">绘画</label><br>
个人介绍：<br><textareaname="introduction"id="introduction"cols="30"rows="10"></textarea><br><button>注册</button><br>
上传个人照片<br><inputtype='file'></fieldset></div></body>
效果图：
总结
以上便是我在学习过程中整理的不同表单的创建方式，有input标签，textarea标签创建文本输入区域，还有select配合option创建下拉式表单。参考博客如下所示：
https://blog.csdn.net/wuyxinu/article/details/103515157
如有补充欢迎提出！
版权归原作者 deidei~~ 所有， 如有侵权，请联系我们删除。