HTML5零基础-12-input元素_input12元素-优快云博客

本文链接：https://blog.youkuaiyun.com/quirkmask/article/details/118667779

这篇博客介绍了HTML中各种类型的input元素，包括text、password、radio、checkbox、file、hidden、button、submit和reset等，并展示了它们的用途、属性如value、readonly、maxlength和disabled的使用方法。同时，提到了单选框通过name属性组织成组以及文件上传表单的enctype设置。此外，还展示了如何创建日期选择框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input</title>
</head>

<!--
        input标签
            type    元素的类型
                text    文本框
                password 密码框
                radio   单选框
                checkbox 复选框
                file    文件域
                hidden  隐藏按钮
                button  普通按钮
                submit  提交按钮
                reset   重置按钮
                date    日期框
            value   元素的值
            readonly 只读
            maxlength   最多输入的长度
            disabled    禁用标签

            注意:
                1. 单选框需要通过name属性设置为一组
                2. 如果是上传文件的表单,则表单需要设置一个属性 enctype="multipart/form-data" post请求
                3.没有name属性无法提交数据

-->
<body>
    <form action="https://www.baidu.com" method="get">
        文本框: <input type="text" value="张三" readonly="readonly"><br>
        文本框: <input type="text" value="张三" maxlength="10"><br>
        密码框: <input type="password" maxlength="10" ><br>
        单选框: <input type="radio" value="man" name="sex"> 男  <input type="radio" value="man" name="sex"> 女<br>
        复选框: <br>
        <input type="checkbox" value="1" name="test"> 1<br>
        <input type="checkbox" value="1" name="test"> 2<br>
        <input type="checkbox" value="1" name="test"> 3<br>
        文件域: <input type="file" ><br>
        隐藏域: <input type="hidden" value="admin" ><br>
        普通按钮: <input type="button" value="admin" disabled="disabled"><br>
        提交按钮:<input type="submit" value="admin"><br>
        重置按钮:<input type="reset" value="admin"><br>
        日期框:  <input type="date">

    </form>

</body>
</html>