【html+css】html表单

Jon34567

已于 2022-02-26 21:35:54 修改

阅读量180

点赞数

文章标签： html css 前端

于 2022-02-26 21:24:59 首次发布

本文链接：https://blog.csdn.net/weixin_44377918/article/details/123156328

版权

表单

1.input

type:
1.button 定义可点击按钮。
2.checkbox 定义复选框。
3.file 定义输入字段和 "浏览"按钮，供文件上传。
4.password 定义密码字段。该字段中的字符被掩码。
5.radio 定义单选按钮。
6.reset 定义重置按钮。重置按钮会清除表单中的所有数据。
7.submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
8.text 定义单行的输入字段，用户可在其中输入文本。

2.button

3.select下拉菜单

4.textarea文本域

5.label绑定内容和表单标签

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    <h1>表单</h1>       <hr>        <h2>1.input</h2>    <!-- input -->    <!-- type:             1.button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。            2.checkbox 定义复选框。            3.file 定义输入字段和 "浏览"按钮，供文件上传。            4.hidden 定义隐藏的输入字段。            5.image 定义图像形式的提交按钮。            6.password 定义密码字段。该字段中的字符被掩码。            7.radio 定义单选按钮。            8.reset 定义重置按钮。重置按钮会清除表单中的所有数据。            9.submit 定义提交按钮。提交按钮会把表单数据发送到服务器。            10.text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。 -->    <form action="">        <!-- 书写可见 -->        <!-- 添加提示（占位符）placeholder -->        文本框: <input type="text" placeholder="请输入用户名">        <br>        <br>        <!-- 书写不可见 -->        密码框: <input type="password" placeholder="请输入密码">        <br>        <br>        单选框: <input type="radio">        <br>        <br>        <!-- 单选----多选一 ：用name实现，同一个name只能选一个-->        <!-- checked: 默认选中 -->        性别：<input type="radio" name="gender">男 <input type="radio" name="gender" checked> 女        <br>        <br>        <!-- checked: 默认选中 -->        多选框: <input type="checkbox" name="" id="" checked>        <br>        <br>        <!-- 一次上传多个 multiple -->        <!-- ctrl+A:全选 -->        上传文件: <input type="file" multiple>        <br>        <br>        <!--按钮            1.button 定义可点击按钮。            8.reset 定义重置按钮。重置按钮会清除表单中的所有数据。            9.submit 定义提交按钮。提交按钮会把表单数据发送到服务器。 -->            <!--reset submit :要有一个表单域form -->            <!-- value 是一个属性，用于显示 -->        <input type="submit" value="免费注册">        <input type="reset">        <input type="button" value="普通按钮">
        <hr>
        <!-- button -->        <h2>2.button按钮</h2>
        <button>我是按钮</button>        <button type="submit">提交按钮</button>        <button type="reset">重置按钮</button>        <button type="button">普通按钮</button>
        <hr>                <!-- select -->        <h2>3.select下拉菜单</h2>        <!-- select：整体；option: 其中一项 ;默认选择是第一项-->        <!-- selected：默认选择 -->
        <select name="" id="">            <option value="">北京</option>            <option value="">上海</option>            <option value="">广州</option>            <option value="" selected>深圳</option>        </select>        <hr>        <h2>4.textarea文本域</h2>        <!-- 自动换行 cols：长 rows：高 -->        <!-- 可拖拽改变大小 -->        <textarea name="" id="" cols="30" rows="10"></textarea>        <hr>        <h2>5.label绑定内容和表单标签</h2>        <!-- 点击文字也可选中 -->        <!-- 方法一 -->        性别：        <input type="radio" name="gender" id="nan"><label for="nan">男</label>         <!-- 方法二 -->        <label><input type="radio" name="gender" checked>女</label>


            </form>

</body></html>