Yan Home

Appearance

表单元素 ​

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

input元素 ​

输入框

  • type属性：输入框类型

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

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

input元素可以制作按钮

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

select元素 ​

下拉列表选择框

通常和option元素配合使用

textarea元素 ​

文本域，多行文本框

按钮元素 ​

button

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

表单状态 ​

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

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

配合表单元素的其他元素 ​

label ​

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

  • 显示关联

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

  • 隐式关联

datalist ​

数据列表

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

form元素 ​

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

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

fieldset元素 ​

表单分组

代码示例 ​

html
<body>
    <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>
</body>
html
<body>
    <p>
        请选择性别：

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


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

<body>
    <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>
</body>
html
<body>
    <p>
        请填写简介：
        <textarea style="width:500px;height:300px;" placeholder="请输入简介"></textarea>
    </p>
</body>
html
<body>
    <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>
</body>
html
<body>
    <p>
        <button type="button">这是一个按钮</button>
    </p>

    <p>
        <input type="image" src="hashiqi.jpg">
        <button>
            <img src="hashiqi.jpg" alt="" style="width:150px;">
            <p>Lorem ipsum dolor sit.</p>
        </button>
    </p>
</body>
html
<body>
    <form action="https://www.baidu.com/" method="GET">
        <p>
            账号：
            <input type="text" name="loginid">
        </p>
        <p>
            密码：
            <input type="password" name="loginpwd">
        </p>
        <p>
            城市：
            <select name="city">
                <option value="1">成都</option>
                <option value="2">重庆</option>
                <option value="3">北京</option>
                <option value="4">哈尔滨</option>
            </select>
        </p>
        <p>
            <button type="submit">提交</button>
        </p>
    </form>
</body>
html
<body>
    <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>
</body>

MIT License

Copyright © 2024-present Yan