HTML表单元素

最新推荐文章于 2022-11-06 00:00:23 发布

YRZ-James

最新推荐文章于 2022-11-06 00:00:23 发布

阅读量133

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_41998938/article/details/90702166

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML表单
标签：…
作用：收集用户输入的内容（文本，文件）
属性：action：提交到的服务端地址
method：指定提交时用哪种HTTP方法：POST/GET
name:标识
autocomplete：浏览器是否可以自动填充
enctype：指定表单内容编码

HTML表单元素
input：文本，密码，单选，多选，按钮，数字，日期，颜色，范围，邮件，URL，文件
select：下拉列表
testarea：文本域
button：按钮

下面的代码给出了上述基本元素的用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="">
        <!--文本，value可以给输入框输入默认值-->
        <!--maxlength="10"代表输入框最多输入10个字符-->
        <input type="text" maxlength="10" value="我是文本"/>
        </br>
        <!--密码,输入的内容不可以见，同样也可以设置默认值-->
        <input type="password" value="我是密码"/>
        </br>
        <!--单选,鼠标点击圆圈后由空心变为实心-->
        <!--只有两个都设置为相同的name后才能变为单选，让你在相同的选择组里做单选操作-->
        <!--value代表选择的那个之后的值-->
        <!--checked代表当前标签是被默认选中的-->
        <input name="gender" value="0" type="radio">男
        <input name="gender" value="1" type="radio">女
        </br>
        <!--多选，和单选不同，点击之后会出现小勾而不是小圆点-->
        <!--多选也是可以设置value值的-->
        <!--checked代表当前标签是被默认选中的-->
        <input value="0" checked type="checkbox">电影
        <input value="1" type="checkbox">音乐
        <input value="2" type="checkbox">美术
        </br>
        <!--按钮，这里的value是按钮的文本-->
        <input type="button" value="我是按钮">
        </br>
        <!--数字,打开之后可以通过上下箭头来选择数字-->
        <input type="number">
        </br>
        <!--日期，只是HTML5中新加入的,并且日期类型的输入框会比正常类型的长一些-->
        <!--可以自动选择年月日-->
        <input type="date">
        </br>
        <!--颜色-->
        <input type="color">
        </br>
        <!--范围,有两个属性可以设置最小值和最大值，进度条按照最小值和最大值进行划分-->
        <input min="0" max="5" type="range">
        </br>
        <!--邮件-->
        <input type="email">
        <!--只有邮件类型是不行的，还需要提交-->
        </br>
        <input type="submit" value="提交">
        </br>
        <!--URL-->
        <input type="url">
        </br>
        <!--文件,带有选择文件的功能,multiple代表可以选择多个文件-->
        <input type="file" multiple="multiple">
        </br>
        <!--下拉列表,multiple size="2"时有两个标签出现在框中-->
        <select multiple size="2" name="" id="">
            <!--写需要选择的项-->
            <option value="">aa</option>
            <!--加入selected之后此项就放在初始位置-->
            <option selected value="">bb</option>
            <option value="">cc</option>
        </select>
        </br>
        <!--文本域，比正常的输入框要大，而且可以多行-->
        <!--rows决定高,cols决定列-->
        <textarea rows="3" cols="3">
                我是一段文本
            </textarea>
        </br>
        <!--button按钮,input的button是在value中设置名称,而这里是在中间设置-->
        <button>提交</button>
        </br>
        <!--重置-->
        <button type="reset">重置</button>
    </form>
</body>
</html>