深圳幻海软件技术有限公司 欢迎您！
更多

HTML教程③-HTML元素大全(2)表单

2023-03-02

type form 表单
HTML系列：人人都懂的HTML基础知识-HTML教程HTML元素大全(1)HTML元素大全(2)-表单CSS系列：CSS基础知识筑基常用CSS样式属性CSS选择器大全48式CSS布局秘籍(1)-任督二脉BFC/IFCCSS布局秘籍(2)-6脉神剑CSS动画-transition/animation

HTML系列：

  • 人人都懂的HTML基础知识-HTML教程
  • HTML元素大全(1)
  • HTML元素大全(2)-表单

CSS系列：

  • CSS基础知识筑基
  • 常用CSS样式属性
  • CSS选择器大全48式
  • CSS布局秘籍(1)-任督二脉BFC/IFC
  • CSS布局秘籍(2)-6脉神剑
  • CSS动画-transition/animation
  • CSS处理器-Less/Scss

01、<form>表单

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

元素/属性 描述 值/备注
<form> 表单元素
 action 提交表单的目标（服务端）地址url
 method 提交数据的方式，就是数据传输的方式 🔸 get：通过URL提交数据[url]?uname=1&age=2，
🔸 post，通过HTTP表单数据提交，键值格式。
 target 提交数据时打开action url的方式 _self：当前窗口（默认值）；_blank：新窗口
 enctype 编码类型（encode type），规定了form表单在发送到服务器时候编码方式，不常用。 🔸 application/x-www-form-urlencoded：编码所有字符（默认）
🔸 multipart/form-data ：混合类型， 表单中有文件上传时使用
🔸 text/plain：纯文体，空格转换为 “+” 加号，不对特殊字符编码
 submit() 提交表单数据，通过js代码调用
<fieldset> 表单分组，默认样式：一个框 便于表单样式管理的语义化元素
 form from的id，当<fieldset>不在form中时
 disabled 整个分组都不可用
 <legend> 作为<fieldset>的标题，显示在框上 （legend /ˈledʒənd/ 铭文、图例） 
<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区别：


 GET POST
提交方式 数据在url的问号?后：url?key=value&key=... 数据在请求体中
编码enctype 只有appliacation-x-www-form-urlencoded 支持多种
书签/历史 可以加入收藏，历史记录、日志会保留数据 不可收藏、不会保留数据
缓存/效率 可以被浏览器缓存，效率（速度）更高 不可缓存
数据类型/长度 只允许 ASCII 字符，URL长度有限制（2048），不同浏览器不同。 类型没有限制，支持二进制数据。长度（几乎）无限制
安全性 安全性更低，数据在URL中容易暴露 安全性稍高，不过传输过程也是明文的，不会在浏览记录、日志中存储
回退/刷新？ 无副作用（幂等），可重复访问 有副作用，数据会被重新提交（不幂等），浏览器一般会提示用户数据会被重新提交
使用场景 获取数据 提交数据：添加、修改、删除

📢因此：

  • 数据有安全性要求的时候，建议用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>的常规属性

基础属性 描述 相关type 值/备注
name 控件名称（通用属性），表单中须赋值，会作为参数名
type 表单控件类型
详见上表
value <input>的值，可设置默认值。
tabindex 当前文档的 Tab 导航顺序中的位置
size 宽度，文本框可显示的字符宽度，类似css的width 字符数量
min/maxlength 可输入字符数量，文本框可输入最少/大字符数量 文本输入类
readonly 只读，不可编辑，IE有光标显示 true值可省略
disabled 不可用，无光标 值可省略
placeholder 占位符/水印，用于输入提示，比较常用 文本输入类
checked 选中状态 单选、多选 值可省略
min/max 最大/小值，数字、日期值的边界 数字、日期 大小边界验证
pattern，IE10 模式（正则表达式），用于值的合法性检测 文本输入类 正则验证
required 必填，hidden、image 或者按钮类型无效 值可省略，必填验证
multiple 是否允许多个值，逗号隔开 email、file 布尔值，值可省略
step 步长，数字、日期 数字、日期
list 候选值：输入框的候选值列表，<datalist>值，显示value 大多数
autocomplete 自动填充，设置浏览器的自动填充模式 大多数
autofocus 页面加载时自动聚焦 布尔值，值可省略
inputmode 值输入模式，虚拟键盘，text, tel, url, email, numeric 文本输入类
form 所属form，值为其id
formaction 表单提交属性，还有formenctype、formmethod、formnovalidate、formtarget image、submit 
<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> 可以输入多行文本，支持换行、空格，行内元素。

属性 描述 值
name 表单提交数据的key
rows 文本行数，同css样式的高度 整数
cols 文本列数，同css样式的宽度 整数

<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>是一个双标签，里可以嵌套其他行内元素，如文字、图片、表单元素。

属性 描述
for 关联的元素id
form <form>的id，可以将<label>放到form外面了，这就很自由了！ 
<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的功能基本相同。不同的是他是双标签，内部可以自由定义内容，也可以使用伪元素，实现更丰富的按钮效果，所以按钮用他就对了。

属性 描述 值
type 按钮的类型 button：普通按钮；submit：表单提交按钮；reset：表单重置按钮；
value 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时，显示为列表，否则显示为下拉框模式。

元素/属性 描述 值/备注
<select> 选项控件
 required 必填，表单的通用属性，还有disabled、autofocus、form等
 multiple 多选，显示为列表，不设置该属性则弹出下拉框。 值也是multiple，值可省略
 size 控件显示的选项行数，配合multiple使用 整数，默认1
 value/selectedIndex 选中的值/索引
<option> <select>的选项子元素
 selected 设置选中 值可省略
 value 选项的值 如果没有value，则取标签内容
 disabled 不可用
<optgroup> 选项分组，给<option>分组
 label 显示的文本
 disabled 分组都禁用 
<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>更为丰富，表示某种计量，适用于温度、重量、金额等量化的可视化展示。

属性 描述
<progress>IE10 进度条
 max 最大值，默认为1
 value 进度值，不设置则为"不确定"状态，显示为加载中的效果（不同浏览器表现不同）
<meter>IE🚫 进度计量，显示已知范围的标量值或者分数值。（/ˈmiːtər/ 计量）
 value 值
 min/max 最小值（默认0），最大值（默认1）
 low/high 低值、高值，用于设置“正常值”的边界区域，以显示不同效果
 optimum 最优值（ /ˈɑːptɪməm/ ），配合low/high使用，判断当前值是否最优
 form 关联form表单的id 
<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组件库，组件库里都会提供更丰富的布局支持。

©️版权申明：版权所有@安木夕，本文内容仅供学习，欢迎指正、交流，转载请注明出处！原文编辑地址

Vue笔记
yarn和npm的区别