HTML:表单

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>
    <body>
        <form>
            <!-- 文本 -->
            <input type="text" maxlength="10" value="文本">
            </br>
            <!-- 密码 -->
            <input type="password" value="密码">
            </br>
            <!-- 单选 -->
            <input type="radio" name="gender" value="0"><input type="radio" name="gender" value="1"></br>
            <!-- 多选 -->
            <input type="checkbox" value="0">电影
            <!-- 默认设置 -->
            <input type="checkbox" checked value="1">音乐
            <input type="checkbox" value="2">美术
            </br>
            <!-- 按钮 -->
            <input type="button" value="按钮">
            </br>
            <!-- 数字 -->
            <input type="number">
            </br>
            <!-- 日期 -->
            <input type="date">
            </br>
            <!-- 颜色 -->
            <input type="color">
            </br>
            <!-- 范围 -->
            <input type="range" min="1" max="10">
            </br>
            <!-- 邮件 -->
            <input type="email">
            </br>
            <!-- 提交 -->
            <input type="submit">
            </br>
            <!-- url -->
            <input type="url">
            </br>
            <!-- 选择文件 -->
            <input type="file">
            </br>
            <!-- 多个文件 -->
            <input type="file" multiple="multiple">
            </br>
            
            <!-- 下拉列表 -->
            <select>
                <option>苹果</option>
                <!-- selected 默认设置 -->
                <option selected >香蕉</option>
                <option>橘子</option>
            </select>
            </br>
            <!-- 对文本域的设置 -->
            <!-- 不可拖动设置的文本框大小 -->
            <style>
                textarea {
                    resize: none;
                }
            </style>
            <!-- 文本域,可设置行列数 -->
            <textarea rows="3" cols="5">
                一段文本
            </textarea>
            </br>
            <!-- 另一种按钮 -->
            <!-- 四种不同作用 -->
            <button type="button">按钮</button>
            </br>
            <button type="menu">菜单</button>
            </br>
            <button type="reset">重置</button>
            </br>
            <button type="submit">提交</button>
            </br>
        </form>
    </body>
</html>

在这里插入图片描述
在这里插入图片描述
表单各属性的使用:

<form action="http://api.abc.com/user" method="post" name="test" enctype="UTF-8">
</form>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值