简介:本篇文章总结了如何用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
如有补充欢迎提出!