12.表单元素详解

最新推荐文章于 2022-07-31 12:18:21 发布

拾玥花开

最新推荐文章于 2022-07-31 12:18:21 发布

阅读量586

点赞数 2

文章标签： html html5 web css css3

本文链接：https://blog.csdn.net/weixin_44691513/article/details/104449188

版权

表单元素详解

form元素：浏览器在网页上专门用来划分出一个用来存储表单元素的区域
form是块元素
form标签的action属性内部是一个连接，指向的是提交表单时向哪个服务器地址发送表单数据。
form标签的method属性内部存储着，该表单向目标服务器传输数据时采用的是哪种方式

**input元素：**在 form 元素中使用，用来展示用户可以输入数据的元素。input标签最终的表现形式和传输至服务器的数据类型，取决于 type 属性。
input是行内块元素
input标签的type属性内部是存储着该input元素输入信息的类别（如，文字，单选，邮箱，电话号码，多选框等）
form标签的name属性内部存储着该input元素的名称，此处的名称与class不同

文字信息输入：type=“text”，
此时input的展示形状为一个输入框
用户输入的信息会在框内显示出来

占位符：placeholder=“请输入用户名”
占位符的作用是在用户尚未输入信息时，在输入框中显示提示信息，该信息在用户点击
输入框并输入任意信息后会自动消失

input元素（密码输入）

密码信息输入：type=“password”
此时input的展示形状为一个输入框
用户输入的信息会被加密，不会显示原始文字信息

占位符：placeholder=“请输入密码”
占位符的作用是在用户尚未输入信息时，在输入框中显示提示信息，该信息在用户点击
输入框并输入任意信息后会自动消失

数字信息输入：type=“number”
此时input的展示形状为一个输入框,当鼠标悬浮在元素上时，此处会显示一个上下调整的按钮，可用来选择具体数字

步长：step=“10”
步长的作用是，当用户点击上下调整的按钮时，数字每次加减的数字，比如step=“10”,那么每次点击就是±10

滑块

type="range"滑块

        <input type="range" min="0" max="99">

日期

<!-- 日期 -->
        <!-- 时分：type="time" -->
        <br>
        <input type="time">
        <!-- 日期：type="date" -->
        <br>
        <input type="date">
        <input type="month">
        <input type="week">
        <input type="datetime-local">

单选按钮

   <!-- type="radio"单选按钮 -->
        <!-- 单选联动：相同的name -->
        <!-- checked：默认选中状态 -->
        <br>
        性别是：
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="2" >女

你们爱我嘛？
        <input type="radio" name="love" id="love01">
        <label for="love01" class="label01">我们爱你</label> lable标签与id进行绑定
        <input type="radio" name="love">我们很爱你
        <input type="radio" name="love">我们非常爱你

复选按钮

 <!-- type="checkbox"复选按钮 -->
        <!-- 后端接收的是键值对：name === value -->
        <br>
        喜欢什么水果？
        <!-- pt === on -->
        <input type="checkbox" name="pt" value="on">葡萄
        <input type="checkbox" name="cm" value="on">草莓
        <input type="checkbox" name="clz" value="on">车厘子
        <input type="checkbox" name="ll" value="on">榴莲

buttom按钮

  <!-- button专职按钮 -->
    <button>点我点我快点我</button>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PT49bm49-1582371933310)(C:\Users\dell\Desktop\我的博客\QQ截图20200222193724.png)]$

下拉列表

 <!-- 下拉列表 -->
    <!-- selected默认选中项 -->
    <select name="month" id="">
        <option value="0" selected>-请选择月份-</option>
        <optgroup label="一季度">
            <option value="1月">1月</option>
            <option value="2月">2月</option>
            <option value="3月">3月</option>
        </optgroup>
        <optgroup value="" label="二季度">
            <option value="4月">4月</option>
            <option value="5月">5月</option>
            <option value="6月">6月</option>
        </optgroup>
        <optgroup value="" label="三季度">
            <option value="1月">7月</option>
            <option value="2月">8月</option>
            <option value="3月">9月</option>
        </optgroup>
    </select>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zcR3GTlJ-1582371933311)(C:\Users\dell\Desktop\我的博客\QQ截图20200222193858.png)]$

textarea区域

textarea元素：创造一个文本输入区域，rows属性表示这个文本输入区域默认的高，cols属性表示这个文本输入区域默认的宽，这里的宽高值得是字符。区域中可以输入任意个文字，超出会有滚动键。

fildset表单

<fieldset>
        <legend>&nbsp;性别&nbsp;</legend>
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="2" >女
        <input type="radio" name="sex" value="0" checked>泰国来的
</fieldset>