01、<form>表单

<form> 表单是比较重要的HTML元素，块元素，主要作用是向服务端提交数据。结合表单元素input使用，通过内部的button按钮提交（type="submit"）表单数据。

<style>#form fieldset {border: 1px solid skyblue;padding: 20px 10px;border-radius: 5px;text-align: center;margin: 10px 0px;}#form fieldset legend {font-size: 1em;border: 1px solid rgb(236, 175, 43);border-radius: 1em;padding: 3px 15px;}</style><form id="form" action="#" target="_self" method="post"><fieldset><legend>登录</legend><input type="text" name="uname" placeholder="请输入用户名" required maxlength="36"><input type="password" name="upwd" required maxlength="12" placeholder="输入密码"><input type="submit" value="submit-登录"></fieldset></form>

?注意：<form>提交数据时参数名为表单元素的name，因此表单控件须设置name属性。

❓get、post区别：

?因此：

• 数据有安全性要求的时候，建议用POST并且加密（HTTPS）。

• 获取数据（如查询）的的时候，一般用GET；提交数据（添加、修改、删除）时一般用POST。

02、<input>表单元素

表单元素<input>单标签、行内元素，主要用于输入各种类型数据。包含多个表单类型type：文本框、复选框、单选框、按钮等。

input.type

input.type/属性	描述	备注
text	文本输入框（默认），单行文本，不支持换行	<input type="text">
password	密码输入框
radio	单选框，相同name为一组互斥	记得赋值value
checkbox	多选框，相同name为一组。如选中多个值会提交多个key-value	记得赋值value
number	数字输入，step设置步长
hidden	隐藏框/域，页面不可见，用于一些逻辑处理
button	普通按钮，按钮显示value值，结合JavaScript事件使用 <input type="button" value="提交" onclick="">	建议用<button>元素代替
submit	表单提交按钮，在form中有效，直接提交表单数据	同<button>元素的submit模式
reset	表单重置按钮，重置表单的数据，form中有效。
image	图片提交按钮，同submit，**src**设置图片，无图则显示alt	height、width设置图片大小
file	文件选择框，如多值则value为第一个值，js获取files取多个值	capture媒体拍摄方式-移动端
accept	可接受文件类型，多个逗号隔开，image/png, video/*	.jpg,.png,.doc
email	电子邮箱，支持邮箱格式验证	验证邮箱格式
range	滑块数字，用 min 和 max 来设置值的范围，step设置步长	list可设置刻度
search	搜索框，和text差不多
tel	电话号码，和text差不多，有些终端支持虚拟键盘	不验证（不同地区格式不同）
url	URL地址，和text差不多	验证url格式
color，IE?	颜色输入控件，
date，IE?	日期输入，年月日
datetime-local，IE?	日期时间输入，年月日、时分秒，Chrome/Opera /Edge支持	yyyy-MM-ddThh:mm
month，IE?	年月输入，输入年份或月份	value="2018-05"
time，IE?	时间控件，小时、分
week，IE?	年和周数，用于输入以年和周数组成的日期，支持的不多

?注意：

• 一般浏览器对不支持的type，都默认降级为text。

• 文件选择框如通过表单提交，表单需设置属性enctype="multipart/form-data"设置表单数据编码为多种数据组合，同时设置提交方式为post，才可以上传文件（二进制）。

<input>的常规属性

<style>

.iform {

text-align: right;

display: grid;

grid-template-columns: 80px 200px 80px 200px;

gap: 10px 5px;

}

/* 重写radio的样式 */

.iform input[type="radio"] {

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

border-radius: 50%;

width: 20px;

height: 20px;

border: 3px solid #999;

transition: 0.2s all linear;

outline: none;

position: relative;

}

.iform input[type="radio"]:checked {

border: 6px solid #4A80FF;

}



.iform input:invalid {

border-color: red;

}

.iform input,.iform label {

height: 26px;

padding: 0 3px;

display: inline-block;

vertical-align: middle;

}

</style>

<form class="iform">

text：<input type="text" autocomplete="on" required placeholder="username" autofocus>

password：<input type="password" required maxlength="12" minlength="6">

number：<input type="number" step="12" min="1" value="33" >

radio：<div style="text-align:left;">

<label><input type="radio" name="sex" checked>男</label>

<label><input type="radio" name="sex">女</label></div>

checkbox：<div style="text-align:left;">

<label><input type="checkbox" name="cbgroup">做饭</label>

<label><input type="checkbox" name="cbgroup">打球</label></div>

<input type="hidden" value="key123">

file：<input type="file" accept="image/*">



email：<input type="email" inputmode="email" pattern=".+@163.com" placeholder="***@163.com">

range：<input type="range" min="0" max="100" value="10" step="5">

search：<input type="search" list="slist">

tel：<input type="tel" pattern="[0-9]*" maxlength="14">

url：<input type="url" placeholder="http://example.com">



color：<input type="color" value="#ff0000" >

datetime-local<input type="datetime-local">

month：<input type="month" step="1">

time：<input type="time" value="12:12">

week：<input type="week" value="12:12" required>



<input type="reset" value="reset重置">

<input type="button" value="普通按钮">

<input type="image" src="../res/btnb.png" width="60px">

<input type="submit" value="submit提交">

</form>

<datalist>数据集合

<datalist>数据集合元素，包含了一组<option>元素，提供给文本类<input>（list属性）使用，作为可选值的数据集。

• 文本、数字输入的候选值，包括text、number、email、url、tel、search等。

• range的刻度。

<datalist id="optfruit"><option value="香蕉">香蕉</option><option value="火龙果">火龙果</option><option value="绿色蔬菜">冬瓜</option><option value="男瓜"><option value="其他"></datalist><input type="search" list="optfruit">

03、<textarea>多行文本

<textarea> 可以输入多行文本，支持换行、空格，行内元素。

<textarea> 还可以使用 <input> 中的一些常见属性，如autocomplete、autofocus、disabled、placeholder、readonly，和 required、maxlength等。可使用css样式属性resize设置输入框的大小调整方式。

<p><label for="txtsumary">个人简介：</label><textarea name="txtsumary" rows="3" cols="50" style="resize: vertical;" required>多行文本内容，支持空格、换行</textarea></p>

04、<label>辅助表单聚焦

<label>是一个文本标签，最主要的使命是辅助表单元素聚焦，点击<label>会让其for关联的元素得到焦点，for属性值所指的元素id就是她的服务客户。因此<label>是表单控件的最佳搭档，点击label=等于点击对应元素。<label>是一个双标签，里可以嵌套其他行内元素，如文字、图片、表单元素。

<p><label for="uname"><span>Name:</span><input id="uname" type="text" name="uname"><span title="required">*</span></label></p><div><label for="username">Name: <span title="required">*</span></label><input id="username" type="text" name="username"></div><label><input type="checkbox" />阅读并同意条款<img src="../res/head-48.gif" width="24px"></label>

⭐还有一种简写的方式：用 label 元素把 input 元素包裹起来，以减少for- id 的使用。

05、<button>按钮

<button> 是HTML5的新元素，行内元素，作用和input-button的功能基本相同。不同的是他是双标签，内部可以自由定义内容，也可以使用伪元素，实现更丰富的按钮效果，所以按钮用他就对了。

<button type="button">普通按钮</button><button type="submit">提交submit</button><button type="reset" style="width:80px;"><img src="../res/sk (13).png"><br/>重置</button>

<button>和<input button>的区别？

• <input>是单标签，无关闭标签。

• <button>的显示内容在标签之间，应用场景更丰富；<input>的显示内容在value属性上，只支持纯文本。

• <button>的鼠标事件里可以直接写代码。

06、<select/option>选项

<select>选择列表元素，行内元素，有弹出下拉框、选项列表两种模式，<option>是他的选项子元素。启用multiple或size>1时，显示为列表，否则显示为下拉框模式。

<form action="">多选multiple：<select id="selfruit" name="selfruit" multiple size="4" list="optfruit"><optgroup label="热带水果"><option value="1">香蕉</option><option value="2">火龙果</option></optgroup><optgroup label="蔬菜"><option value="3">绿色蔬菜</option><option value="4">冬瓜</option><option value="4" disabled>男瓜</option></optgroup><option value="5">其他</option></select>单选：<select name="selsex" size="0" required><option value="" selected>选择性别</option><option value="1">男</option><option value="2">女</option><option value="5">其他</option></select><input type="submit"></form>

07、<progress><meter>进度计量

两者都可以实现进度的效果，<progress>为进度条元素。<meter>更为丰富，表示某种计量，适用于温度、重量、金额等量化的可视化展示。

<fieldset style="display:inline-block;"><legend>Progress</legend>progress：<progress value="0.3"></progress><br>progress(无value)： <progress></progress><br>value溢出： <progress max="100" value="120"></progress></fieldset><fieldset style="display:inline-block;"><legend>Meter</legend>普通进度：<meter value="0.2"></meter><br>value小于low：<meter value="10" max="60" min="0" optimum="26" low="20" high="30"></meter><br>value大于high：<meter value="55" max="60" min="0" optimum="15" low="20" high="30"></meter><br>value居中<meter value="25" max="60" min="0" optimum="26" low="20" high="30"></meter></fieldset>

08、表单布局

表单是前端常用的组件，布局必不可少，一个美观、简介的布局尤为重要。一个最小单位的表单输入部件，除了表单元素，还必须考虑标题、错误提示等。对于整个表单还要考虑多个表单输入项的行列排列、对齐。

最基本的HTML表单布局思路：

• 小部件：用<div>或<p>包装一个最小的部件，里面包含<label>表单项标题、<input>、<span>提示信息。

<div><label for="uname">姓名：</label>		<!-- 标签 --><input type="text" name="uname" required maxlength="20">	<!-- 表单元素 --><span title="必填">*</span>					 <!-- 作为额外提示，包括输入验证错误的提示信息 --></div>

• 表单分区，对于复杂的表单，用<fieldset>、标题<h*>、分段<section>等来分区组织不同类型的内容。

• 表单布局：借助CSS表格布局、Grid、Flex等工具进行布局。

• 第三方表单组件：实际项目中都会引入第三方UI组件库，组件库里都会提供更丰富的布局支持。

本文链接：https://www.kkkliao.cn/?id=150 转载需授权！