28、HTML进阶——表单元素

lvh98

已于 2022-08-04 12:15:39 修改

阅读量252

点赞数

分类专栏： web前端学习笔记（HTML+CSS篇）文章标签： css html 前端

于 2022-07-07 02:10:19 首次发布

本文链接：https://blog.csdn.net/lvh98/article/details/125650941

版权

web前端学习笔记（HTML+CSS篇）专栏收录该内容

38 篇文章 1 订阅

订阅专栏

表单元素

文章目录

表单元素

一系列元素，主要用于收集用户数据

1. input元素

输入框，可替换元素，空元素。

1.1 type属性：输入框类型

text，普通文本输入框，type="text"

<!-- 普通文本输入框 -->
<input type="text" value="请输入任意文本" placeholder="请输入账号">

text_input

password，密码框，type="password"

输入的文本会被某个字符代替，例如“************”，无关网络安全。

<!-- 密码框 -->
<input type="password" placeholder="请输入密码">

password_input

date, 日期选择框，type="date"，有兼容性问题。

<!-- 日期选择框 -->
<input type="date">

date_input

search, 搜索框，type="search"，有兼容性问题，需要配合JS使用。

<!-- 搜索框 -->
<input type="search">

search_input

range，滑块，type="range"，有兼容性问题。

<!-- 滑块 -->
<input type="range" min="0" max="5">

range_input

color，颜色选择框，type="color"，需要配合JS使用。

<!-- 颜色选择框 -->
<input type="color">

color_input

number，数字输入框，type="number"，有兼容性问题。

<!-- 数字输入框 -->
<input type="number" min="0" max="1000" step="10">

number_input

checkbox，多选框，可以使用布尔属性checked，使该框默认状态就是选中状态。

多选框分组需要设置name属性。

<!-- 多选框 -->
爱好：
<input name="preference" type="checkbox">
运动
<input name="preference" type="checkbox">
阅读
<input name="preference" type="checkbox" checked>
音乐
<input name="preference" type="checkbox">
绘画

checkbox_input

radio，单选框，同样可以使用布尔属性checked

<!-- 单选框 -->
性别：
<input name="gender" type="radio" checked>
男
<input name="gender" type="radio">
女

radio_input

file，选择文件

<!-- 选择文件 -->
<input type="file">

file_input

1.2 value属性：输入框的值，初始状态value的内容会出现在文本框中

1.3 placeholder属性：显示提示的文本，文本框一旦没有内容就会显示

value和placeholder同时设置时，初始状态会显示value的值

input元素除了可以当作输入框，还可以制作按钮，在老版本不支持按钮元素的浏览器中，可以使用input元素代替button元素。
当type值为reset、button、submit时，input表示按钮，分别表示重置按钮、普通按钮、提交按钮。
type值为button的按扭没有默认文本，可以通过value属性设置显示文本。reset和submit的默认文本是”重置“和”提交“。

<!-- 按钮 -->
<input type="button" value="普通按钮">
<input type="reset">
<input type="submit">

button_input

2. select元素

下拉列表选择框。通常和option元素配合使用，select的子元素只能是option。

可以在某个子option元素中添加布尔属性selected，使该子元素是默认被选中的状态，不设置任何selected属性的情况下，下拉选择框选中的是第一个option的内容。

请选择城市：
<select name="" id="">
    <option>北京</option>
    <option>上海</option>
    <option>成都</option>
</select>

select_and_option

下拉选项可分组，此时需要使用optgroup元素，分组名使用属性label设置，然后再在optgroup元素中放入若干option子元素。label分组名不能被选中。

<p>
    请选择你最感兴趣的游戏：
    <select>
        <optgroup label="战争策略">
            <option>率土之滨</option>
            <option>皇室战争</option>
            <option>部落冲突</option>
        </optgroup>
        <optgroup label="动作枪战">
            <option selected>使命召唤</option>
            <option>和平精英</option>
            <option>明日之后</option>
        </optgroup>
    </select>
</p>

optgroup_exp1

若要在下拉列表选择框中多选，则需要给select元素设置multiple属性，该属性也是布尔属性。

<p>
    请选择你最感兴趣的游戏：
    <select multiple>
        <optgroup label="战争策略">
            <option>率土之滨</option>
            <option>皇室战争</option>
            <option>部落冲突</option>
        </optgroup>
        <optgroup label="动作枪战">
            <option selected>使命召唤</option>
            <option>和平精英</option>
            <option>明日之后</option>
        </optgroup>
    </select>
</p>

optgroup_multiple

3. textarea元素

文本域，多行文本框。有时需要填写的文本较多，input不能容纳，因此需要使用多行文本框进行输入。

需要注意的属性有cols和rows，cols表示多少列，即一行可以容纳多少字母；rows表示多少行。当文本超出范围时，文本向下扩展，出现上下滚动条。

<p>
    请填写简历：
    <textarea placeholder="请输入简历" style="width: 300px; height: 100px; display: block;"></textarea>
</p>

textarea

实际使用中，建议使用css来设置文本框的大小。且文本框大小默认可调（resize默认值是both），可以使用resize属性（both/none/horizontal/vertical）改变宽高是否可调。

textarea元素的特点：

是可替换元素
文本框中的默认内容是在元素内容中设置的（其余大部分元素的默认内容是在元素属性中设置的）
设置文本框默认内容时，当中没有空白折叠，这点有点类似pre元素

实际使用中，不太会在textarea元素中写默认文本，而会在元素属性中设置placeholder属性。

4. botton元素

<button>，语义上直接使用button元素设置按钮，比使用input元素设置按钮要好一些。兼容性方面，目前botton元素在绝大部分浏览器中是兼容的，因为botton是在html4.01中推出的。当然如果要最大的兼容性，还是使用input元素type="botton"。

type属性（表示按钮的类型）：

submit（提交），默认值；
reset（重置）；
button（普通）。

如果要在按钮中加一些其他内容，例如图片、文本等，使用button元素会更加灵活。

<button type="button">这是一个按钮</button>

<button>
    <img src="../../图片素材/HTML&CSS.jpg" alt="" style="width: 100px; height: 80px;">
    <p>这也是一个按钮</p>
</button>

<input type="image" src="../../图片素材/HTML&CSS.jpg" width="100px" height="80px">

botton

上面三个都是按钮，但是使用botton元素可以灵活的在按钮中放置多种元素，且方便设置样式。

5. 表单状态

readonly属性：布尔属性，是否只读，不会改变表单显示样式。设置readonly属性后表示表单处于只读状态，用户不能修改其内容；

<input value="readonly" readonly>

readonly

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

<input value="readonly" disabled>

disabled

6. 配合表单元素的其他元素

6.1 label

普通元素，通常配合单选和多选框使用。

显示关联

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

<!-- 显示关联 -->
<p>
    请选择性别：
    <input type="radio" name="gender" id="radio1">
    <label for="radio1">男</label>
    <input type="radio" name="gender" id="radio2">
    <label for="radio2">女</label>
</p>

label1

隐式关联

将input写做label的子元素。

<!-- 隐式关联 -->
<p>
    请选择性别：
    <label>
        <input type="radio" name="gender">male
    </label>

    <label>
        <input type="radio" name="gender">female
    </label>
</p>

label2

可以看到，关联label后，点击其文本label也是可以选中选框的。

6.2 datalist

数据列表，该元素本身不会显示到页面，通常用于和普通文本框配合。datalist的子元素必须是option。

datalist元素在未关联到文本框的时候是不显示到页面的，display值为none。datalist与input元素的关联方式是，给datalist元素一个id属性，然后给input元素的list属性中添加datalist元素的id值。

<p>
    请输入你常用的浏览器：
    <input type="search" list="userAgent">
</p>

<datalist id="userAgent">
    <option value="Chrome">谷歌浏览器</option>
    <option value="IE">IE浏览器</option>
    <option value="Opera">欧鹏浏览器</option>
    <option value="Safari">苹果浏览器</option>
    <option value="FireFox">火狐浏览器</option>
</datalist>

datalist

注意元素value属性值和元素内容的显示位置。填入文本框的是value值。

6.3 form元素

通常，会将整个表单元素，放置form元素的内部，作用是当提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器。

form元素对开发静态页面没有什么意义。

6.4 fieldset元素

表单分组，给多个表单元素分组。分组样式是可以设置改变的，且样式完全可以用其他元素代替，但是使用fieldset元素是处于语义化。

分组标题可以通过添加子元素legend来设置。

<fieldset>
    <legend>fieldsettest</legend>
    <p>
        <!-- 普通文本输入框 -->
        <input type="text" value="请输入任意文本" placeholder="请输入账号">
    </p>

    <p>
        <!-- 密码框 -->
        <input type="password" placeholder="请输入密码">
    </p>

    <p>
        <!-- 日期选择框 -->
        <input type="date">
    </p>

</fieldset>