表单

最新推荐文章于 2022-06-29 17:51:59 发布

无区新手

最新推荐文章于 2022-06-29 17:51:59 发布

阅读量238

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/qq_40660787/article/details/104504068

版权

HTML+CSS 专栏收录该内容

33 篇文章 4 订阅

订阅专栏

表单元素

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

input元素

输入框

type属性：输入框类型

type: text，普通文本输入框
type：password，密码框
type: date, 日期选择框，兼容性问题
type: search, 搜索框，兼容性问题
type: number，数字输入框
type: checkbox，多选框
type: radio，单选框

value属性：输入框的值
placeholder属性：显示提示的文本，文本框没有内容时显示

input元素可以制作按钮

当type值为reset、button、submit时，input表示按钮。

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

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

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

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

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

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

    <p>
        <!-- 数字输入框 -->
        <input type="number" min="0" max="100" step="20">
    </p>

    <p>
        <!-- 多选框 -->
        爱好：
        <input name="loves" type="checkbox">
        音乐
        <input checked name="loves" type="checkbox">
        电影
        <input name="loves" type="checkbox">
        阅读
        <input name="loves" type="checkbox">
        其他
    </p>
    <p>
        <!-- 单选框 -->
        性别：
        <input name="gender" type="radio">
        男
        <input checked name="gender" type="radio">
        女
    </p>

    <p>
        <input type="file">
    </p>

    <p>
        <input type="submit" value="这是一个提交按钮">
    </p>

select元素

下拉列表选择框

通常和option元素配合使用

 <p>
        请选择城市：
        <select>
            <option>成都</option>
            <option>北京</option>
            <option selected>哈尔滨</option>
        </select>
    </p>

    <p>
        请选择你最喜欢的主播：
        <select>
            <optgroup label="才艺表演">
                <option>冯提莫</option>
            </optgroup>
            <optgroup label="游戏主播">
                <option>WETed</option>
                <option>infi</option>
                <option>th000</option>
            </optgroup>
        </select>
    </p>

    <p>
        请选择你喜欢的主播：
        <select multiple>
            <optgroup label="才艺表演">
                <option>冯提莫</option>
            </optgroup>
            <optgroup label="游戏主播">
                <option>WETed</option>
                <option>infi</option>
                <option>th000</option>
            </optgroup>
        </select>
    </p>

textarea元素

文本域，多行文本框

    <p>
        请填写简介：
        <textarea style="width:500px;height:300px;" placeholder="请输入简介"></textarea>
    </p>

按钮元素

button

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

配合表单元素的其他元素

label

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

显示关联

<p>
	请选择性别：
	<input id="radMale" name="gender" type="radio">
	<label for="radMale">男</label>

	<input id="radFemale" name="gender" type="radio">
	<label for="radFemale">女</label>
</p>

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

隐式关联

<p>
        请选择性别：

        <label>
            <input name="gender" type="radio">
            男
        </label>


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

datalist

数据列表

该元素本身不会显示到页面，通常用于和普通文本框配合

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

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

form元素

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

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

fieldset元素

表单分组

表单状态

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

<div>
        <h1>修改用户信息</h1>
        <fieldset>
            <legend>账号信息</legend>
            <p>
                用户账号：
                <input type="text" value="aaaaa" readonly>
            </p>
            <p>
                用户密码：
                <input type="password">
            </p>
        </fieldset>

        <fieldset>
            <legend>基本信息</legend>
            <p>
                用户姓名：
                <input disabled value="袁进" type="text">
            </p>
            <p>
                城市：
                <select disabled name="" id="">
                    <option value="">Lorem.</option>
                    <option value="">Vel!</option>
                    <option value="">Dolore?</option>
                    <option value="">Autem?</option>
                    <option value="">Nulla?</option>
                    <option value="">Aliquam?</option>
                    <option value="">Obcaecati!</option>
                    <option value="">Nulla!</option>
                    <option value="">Totam.</option>
                    <option value="">Ipsum.</option>
                </select>
            </p>
        </fieldset>


        <p>
            <button disabled>提交修改</button>
        </p>
    </div>