• 【HTML】化神篇

    文章目录

    表单元素

    input元素（输入框）

    button元素（按钮元素）

    label元素 （普通元素，通常配合单选和多选框使用）

    select元素 （下拉列表选择框）

    textarea元素（文本域，多行文本框）

    datalist元素（数据列表）

    form元素 （整个表单元素放在form元素内部）

    fieldset元素 （用于表单分组使用）

    设置表单状态

    专栏目录：HTML专栏

    引言

    上文我们讲到了注释列表等一些标签的使用方法，今天的主题只有一个元素：表单元素。表格元素因为需要借助CSS才能展现，所以我们会在讲解CSS的时候讲解表格元素，持续关注博主，学习不迷路！

    表单元素

    表单元素有一系列元素，主要用于收集用户数据，接下来会一一列举常见的表单元素

    input元素（输入框）

    其语法基本格式如下：

    <input type="text">

    input元素类型众多，改变 type 的值能得到需要意想不到的效果的输入框。如下：

    type属性输入框的类型

    text

    普通文本输入框

    password

    密码框

    date

    日期选择框，有兼容性问题

    search

    搜索框，有兼容性问题

    range

    滑块

    number

    数字输入框

    checkbox

    多选框

    radio

    单选框

    file

    选择文件上传

    在 input 中也可以为输入框配置 value属性：输入框的值 ；placeholder属性：显示提示文本，文本框没有内容时显示，一般placeholder属性最为常用。

    input元素可以制作按钮

    当 type 值为 reset(重置)、button(普通)、submit(提交) 时，input表示按钮。

    大家可以看一下代码效果

    1. <body>
    2.   <p>
    3.     <!-- 普通文本输入框 -->
    4.     <input type="text" placeholder="请输入账号">
    5.   </p>
    6.   <p>
    7.     <!-- 密码框 -->
    8.     <input type="password" placeholder="请输入密码">
    9.   </p>
    10.   <p>
    11.     <!-- 日期选择框 -->
    12.     <input type="date">
    13.   </p>
    14.   <p>
    15.     <!-- 搜索框 -->
    16.     <input type="search">
    17.   </p>
    18.   <p>
    19.     <!-- 滑块 -->
    20.     <input type="range" min="0" max="6">
    21.   </p>
    22.   <p>
    23.     <!-- 颜色选择 -->
    24.     <input type="color">
    25.   </p>
    26.   <p>
    27.     <!-- 数字输入框 -->
    28.     <input type="number" min="0" max="100" step="10">
    29.   </p>
    30.   <p>
    31.     <!-- 多选框 -->
    32.     游戏：
    33.     <input name="loves" type="checkbox">
    34.     阅读：
    35.     <input type="checkbox">
    36.     电影：
    37.     <input type="checkbox">
    38.     音乐：
    39.     <input type="checkbox">
    40.     其他：
    41.     <input type="checkbox">
    42.   </p>
    43.   <p>
    44.     <!-- 单选框 告诉浏览器它们属于一个组  -->
    45.     性别：
    46.     <input name="gender" type="radio">
    47.     男
    48.     <input name="gender" type="radio">
    49.     女
    50.   </p>
    51.   <p>
    52.     <input type="file">
    53.   </p>
    54.   <p>
    55.     <input type="submit" value="这是一个提交的按钮">
    56.   </p>
    57. </body>

    button元素（按钮元素）

    type属性：reset、submit、button，默认值submit

    <button>这是一个按钮</button>

    label元素 （普通元素，通常配合单选和多选框使用）

    显示关联——可以通过for属性，让label元素关联某一个表单元素，for属性书写表单元素id的值

    1. <body>
    2.     请选择性别：
    3.     <input id="radMale" name="gender" type="radio">
    4.     <label for="radMale">男</label>
    5.     <input id="redFemale" name="gender" type="radio">
    6.     <label for="redFemale">女</label>
    7. </body>

    隐式关联——直接将 label 嵌套在单选或多选框外面

    1. <body>
    2.     请选择性别：
    3.     <label>
    4.         <input type="radio" name="gebder">
    5.         男
    6.     </label>
    7.     <label>
    8.         <input type="radio" name="gebder">
    9.         女
    10.     </label>
    11. </body>

     

    select元素 （下拉列表选择框）

    select元素通常要和option(表示下拉列表的选项)元素配合使用

    1. <body>
    2.     <!-- 什么属性都不加 -->
    3.     请选择城市：
    4.     <select>
    5.         <option>成都</option>
    6.         <option>北京</option>
    7.         <option>南京</option>
    8.         <option>苏州</option>
    9.         <!-- 开始默认是无锡 -->
    10.         <option selected>无锡</option> 
    11.     </select>
    12. </body>

    1. <body>
    2.     请选择你最喜欢的主播：
    3.     <select>
    4.         <!-- 通过 <optgroup> 标签把相关的选项组合在一起，label 属性为选项组规定描述，所有主流浏览器都支持 label 属性。 -->
    5.         <optgroup label="才艺表演">
    6.             <option>周杰伦</option>
    7.             <option>蔡依林</option>
    8.         </optgroup>
    9.         <optgroup label="游戏主播">
    10.             <option>WEed</option>
    11.             <option>ini</option>
    12.             <option>th00</option>
    13.             <option>123d</option>
    14.         </optgroup>
    15.     </select>
    16. </body>

    1. <body>
    2.     请输入你喜欢的主播：
    3.     <!-- multiple：允许在下拉列表中进行多选 -->
    4.     <select multiple>
    5.         <optgroup label="才艺表演">
    6.             <option>冯提莫</option>
    7.             <option>蔡依林</option>
    8.         </optgroup>
    9.         <optgroup label="游戏主播">
    10.             <option>WETed</option>
    11.             <option>infi</option>
    12.             <option>th000</option>
    13.             <option>123ddd</option>
    14.         </optgroup>
    15.     </select>
    16. </body>

    这里解释一下multiple属性，其是一个布尔属性，规定可同时选择多个选项。

    在不同操作系统和浏览器中，选择多个选项的差异：

    • 对于 windows：按住 Ctrl 按钮来选择多个选项
    • 对于 Mac：按住 command 按钮来选择多个选项

    由于上述差异的存在，同时由于需要告知用户可以使用多项选择，对用户更友好的方式是使用复选框。

    textarea元素（文本域，多行文本框）

    1. <body>
    2.     <h3>请填写简介：</h3>
    3.     <!-- 带有指定高度和宽度的文本区域 -->
    4.     <textarea cols="30" rows="10"></textarea>
    5. </body>

    datalist元素（数据列表）

    该元素本身不会显示到页面上，通常用于和普通文本框配合使用，<datalist> 标签规定了 <input> 元素可能的选项列表，用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

    1. <body>
    2.   <p>
    3.       请输入你常用的浏览器：
    4.       <input list="userAgent" type="text">
    5.   </p>
    6.  
    7.   <datalist id="userAgent">
    8.       <option value="Chrome">谷歌浏览器</option>
    9.       <option value="IE">IE浏览器</option>
    10.       <option value="Opera">欧鹏浏览器</option>
    11.       <option value="Safari">苹果浏览器</option>
    12.       <option value="Firefox">火狐浏览器</option>
    13.   </datalist>
    14. </body>

    form元素 （整个表单元素放在form元素内部）

    通常，会将整个表单元素，放置form元素内部，作用是当提交表单时，会见form元素内部的表单内容以合适的方式提交到服务器，对开发静态页面没有什么意义。表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。

    1. <body>
    2.   <form action="https://www.baidu.com" method="get">
    3.     <p>
    4.       账号：
    5.       <input type="text" name="loginid">
    6.     </p>
    7.     <p>
    8.       密码：
    9.       <input type="password" name="loginpwd">
    10.     </p>
    11.     <p>
    12.       城市：
    13.       <select name="city">
    14.         <option value="1">成都</option>
    15.         <option value="2">重庆</option>
    16.         <option value="3">北京</option>
    17.         <option value="4">无锡</option>
    18.       </select>
    19.     </p>
    20.     <p>
    21.       <button type="submit">提交</button>
    22.     </p>
    23.   </form>
    24. </body>

    fieldset元素 （用于表单分组使用）

    通常我们开发的时候，比如登录框，我们会把账号信息和基本信息进行分组

    1. <body>
    2.   <div>
    3.     <h1>修改用户信息</h1>
    4.     <fieldset>
    5.       <legend>账号信息</legend>
    6.       <p>
    7.         用户账号：
    8.         <input type="text" value="admin" readonly>
    9.       </p>
    10.       <p>
    11.         用户密码：
    12.         <input type="password">
    13.       </p>
    14.     </fieldset>
    15.     <fieldset>
    16.       <legend>基本信息</legend>
    17.       <p>
    18.         用户姓名：
    19.         <input disabled type="text" value="aaa">
    20.       </p>
    21.       <p>
    22.         城市：
    23.         <select name="" id="">
    24.           <option value="">Lorem.</option>
    25.           <option value="">Molestiae!</option>
    26.           <option value="">Libero.</option>
    27.           <option value="">Hic?</option>
    28.           <option value="">A?</option>
    29.           <option value="">Ipsum!</option>
    30.           <option value="">Facilis.</option>
    31.           <option value="">Est?</option>
    32.           <option value="">Libero?</option>
    33.           <option value="">Officia?</option>
    34.         </select>
    35.       </p>
    36.     </fieldset>
    37.     <p>
    38.       <button>提交修改</button>
    39.     </p>
    40.   </div>
    41. </body>

    设置表单状态

    在日常生活中我们可能会遇到一些根本无法点击的按钮，这就涉及到表单的状态了

    readonly属性：布尔属性，只读属性，不会改变表单的样式

    disabled属性：布尔属性，是否禁用，会改变表单显示样式

    1. <body>
    2.     <p>
    3.         <input type="text" disabled>
    4.     </p>
    5.     
    6.     <p>
    7.         <input type="text" value="123" readonly>
    8.     </p>
    9. </body>

    个人总结：

    因为表单元素在日常开发中使用频率极高，像搜索框登陆注册框等都需要借助表单元素的支持，所以这方面的内容要稍稍多一点，所以尽量写细一点吧。如果能够对你有帮助那不枉我深夜码字了，哈哈哈。化神是真的头有点神呼呼的了~~，下期讲解HTML5新特性吧！那么现在，开始学习吧。

  • 相关阅读:
    【精品】k8s的存储PV与PVC详解
    返校季：浅谈海外市场仅次于圣诞节的第二大购物旺季
    Web3：开源文化下的技术创新
    一文带你了解web前端是如何制作表白网站(HTML+CSS+JS)
    看我简单教会你如何按关键字搜索淘宝商品
    数组中子元素为空数组时去掉为空的数组
    【uvm】DUT 和 testbench 是如何连接的
    前端开发实践：vue中用qrcode库将超链接生成二维码图片
    使用贪心算法实现文本左右对齐
    【luogu P2508】圆上的整点（高斯素数模板）
  • 原文地址：https://blog.csdn.net/qq_53123067/article/details/125601877