INPUT标签的简单介绍和使用

185 阅读1分钟

INPUT标签

input,翻译过来就是 “输入” 的意思,在 HTML 中,大多数表单都是使用 input 标签来实现的。

语法:
<input type="类型"/>

这里我以表格形式,列举出 input 标签中 type 属性的取值和在浏览器中的运行效果,如下表格所示

属性值解释说明
text单行文本框
password密码文本框
radio单选框
checkbox多选框
button、submit、reset按钮
file文件上传

下面是这段时间学习的部分HTML知识的复习,以及自己的尝试,虽然很简洁,也是一种学习的复习和进步吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<figure>
    <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
</figure>
<body>
用户名: <input type="text" placeholder="输入信息">
<br>
<br>
密码: <input type="password" placeholder="请输入密码">
<br>
<br>
单选框: <input type="radio" name="key"><input type="radio" name="key"><input type="radio" name="key">
<br>
<br>
多选框: <input type="checkbox"><input type="checkbox"><input type="checkbox">
<br>
<br>
上传文件: <input type="file">
上传文件: <input type="file" multiple>
<button type="submit">提交</button>
<button type="reset">重置</button>
</body>
</html>

下面是测试结果:

image.png