HTML5学习补充二---表单进阶

最新推荐文章于 2024-07-21 16:57:44 发布

阿茶阿茶

最新推荐文章于 2024-07-21 16:57:44 发布

阅读量137

点赞数

分类专栏： HTML5 文章标签：学习前端 html html5

本文链接：https://blog.csdn.net/Flora_hsx/article/details/126804488

版权

HTML5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一：单选框

<body>
    <h1>表单---单选框</h1>
    <div>你对于京东首页满意度如何</div>
    <div>
        <input type="radio" name="one" id="one_1" checked="checked">
        <label for="one_1">非常满意</label>
    </div>
    <div>
        <input type="radio" name="one" id="one_2">
        <label for="one_2">一般</label>
    </div>
    <div>
        <input type="radio" name="one" id="one_3">
        <label for="one_3">不满意</label>
    </div>
</body>

1：type="radio"

2：name为one的组内，只能选择一个（单选框）

3： label标签的作用：可以实现点击文字同样可以选中这个选项，需要设置其对应的id

4：checked设置默认选项，也可以省略写为checked

二：复选框

<body>
    <div>你的兴趣爱好是什么</div>
    <div>
        <input type="checkbox" name="two" id="two_1" checked>
        <label for="two_1">睡觉</label>

        <input type="checkbox" name="two" id="two_2" checked>
        <label for="two_2">吃饭</label>

        <input type="checkbox" name="two" id="two_3">
        <label for="two_3">打豆豆</label>
    </div>
</body>

1：type="checkbox"

2：name，id，checked，label使用同单选框

三：上传文件

    <div>请截图说明</div>
    <div>
        <input type="file" name="" id="">
    </div>

    <h1>图片按钮-</h1>
    <div>图片代替提交按钮</div>
    <form action="">
        <input type="image" src="/history/photo/1.png">
    </form>

1：type="file"

2：type="image"，可以将图片替换提交按钮

四：隐藏字段

    <h1>隐藏字段/给后端看的数据</h1>
    <input type="hidden" name="" id="" value="带给后端的个人信息">

1：type="hidden" value=""

2：主要是隐藏要同步给后端的数据，不是给普通用户看的

使用案例：例如淘宝首页登陆之后，其他页面会同步登陆信息，这些登陆信息是通过hidden传输给后端同步；

五：不可选按钮/禁用功能/只读

    <h1>禁用/只读</h1>
    <div>
        <button disabled>注册</button>
        <input type="text" readonly value="222">
    </div>

1：disable="disable"，也可简写为disable，禁用属性

2：buttom，input都可以设置此属性

3：readonly：只读属性

六：下拉菜单

1：select支持的属性

a：size：可以显示出几个选项，默认是显示一个

b：multiple：多项选择，可以选择多个选项

2：option支持的属性

a：value：选项要提供给后端的value值

b：selected：默认选中的选项

<h1>下拉菜单</h1>
    <div>
        <div>请选择你的收货地址</div>
        <select size="2">
            <option value="liaoning">辽宁</option>
            <option value="">山东</option>
            <option value="">陕西</option>
            <option value="" selected>上海</option>
        </select>
        
        <div>请选择你要下单的商品</div>
        <select multiple>
            <option value="">桌子</option>
            <option value="">椅子</option>
            <option value="">凳子</option>
            <option value="">抹布</option>
        </select>
        <!-- 按住ctrl，shift键选择 -->
    </div>

七：文本域/多行文本输入框（textarea）

1：textarea支持的属性

a：name

b：id

c：clos：一行支持输入多少个字符，输入可显示的列数

d：rows：总计显示多少行内容

实际中不常用这个，常用css方式指定文本域的宽高显示区域

e：placeholder：预置文本，提示文字

f：提前设置好的value值，写在双标签内部，注意空格、换行问题

<textarea> 提前设置好的value </textarea>

input是使用value属性设置，请注意此区别

g：使用css显示文本域大小

    <style>
        textarea{
            width: 300px;
            height: 300px;
            resize: horizontal;
        }
    </style>

resize：vertical：只在垂直方向可以调整大小

horizontal：只在水平方向可以调整大小

both：两个方向都支持

none：不支持调整大小

八：字段集

1：fieldset标签

    <fieldset>
        <legend>性别</legend>
        <input type="radio">man
        <input type="radio">woman
    </fieldset>

2：可以用css设置fieldset标签、legend标签的属性，例如边框样式，背景颜色等

阿茶阿茶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习补充二---表单进阶

HTML表单使用扩充知识
复制链接

扫一扫

专栏目录

HTML5学习补充二---表单进阶

“相关推荐”对你有帮助么？