html基础标签——input

作者: LeslieFind | 来源:发表于2020-05-07 20:32 被阅读0次

Day 21HTML基础标签
html基础标签——input
前端组件总结
html入门级常用标签
ionic input 标签的使用
HTML标签知识点详解
2018-09-19CSS布局
HTML常用标签
Html 学习笔记
html 可提交数据到后台的标签

效果： image.png

代码：

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

    <h3>type="text" 和 type="password"</h3>
    <p>普通文本框：<input type="text"/></p>
    <p>密码文本框：<input type="password"/></p>
    <hr/>

    <h3>type="radio" 单选</h3>
    <div>
<!--        使用相同的name属性值，让其只能选1个-->
        男<input type="radio" name="dx"/><br>
        女<input type="radio" name="dx"/>
    </div>
    <hr/>

    <h3>type="checkbox"</h3>
    <div>
        吃饭<input type="checkbox"/><br>
        睡觉<input type="checkbox"/><br>
        追剧<input type="checkbox"/>
    </div>
    <hr/>

    <h3>type="file"</h3>
    <span style="color: red">注：一般在from标签内，要求form属性enctype="multipart/form-data"</span>
    <p>
        <input type="file"/>
    </p>
    <hr/>

    <h3>type="button",type="submit",type="reset"</h3>
    <span style="color: red">注：一般在form标签内，对表单内的内容进行提交或重置</span>
    <p>
        <input type="button" value="t=button" />
        <input type="submit" value="t=submit"/>
        <input type="reset" value="t=reset"/>
    </p>

</body>
</html>

总结：

类型：
1、普通文本框：text
2、密码文本框：password
3、单选框：radio
（注意：1.单选需要用相同的属性name关联；2.提交表单时必须要定义属性name和value）
4、复选框：checkbox
（注意：提交表单时必须要定义属性name和value）
5、文件上传：file
（注意：1.form标签中的属性enctype="multipart/form-data"；2.提交表单时必须要定义属性name）
6、按钮：button，submit，reset
（注意：与form一起用，前两个是提交form里的内容，reset是对form重置）