HTML + CSS 连载 | 33 - HTML 表单

最新推荐文章于 2024-07-25 11:52:08 发布

Riemann Hypothesis

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量37

点赞数

分类专栏： HTML2CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/JingnanJia/article/details/134131311

版权

HTML2CSS 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

html+css.jpeg

一、HTML 表单

HTML 表单是和用户交互最重要的方式之一，很多网站都要使用到表单，比如登录页面就是一个表单：

HTML 中常见的表单元素有：

form：表单元素，一般情况下，其他表单相关元素都是它的元素的后代元素
input：单行文本输入框、单选框、复选框、按钮等元素
textarea：多行文本框元素
select\option：下拉选择框元素
button：按钮元素
label：表单元素的标题元素

二、input 单行文本输入元素

表单中使用最多的就是 input 元素，input 元素中最重要的一个属性就是 type 属性，通过修改 input 元素的 type 属性，可以表示不同作用的输入框，如：

text：文本输入框，明文输入
password：文本输入框，密文输入
radio：单选框
checkbox：复选框
button：按钮
reset：重置
submit：提交表单数据给服务器
file：文件上传

创建 HTML 页面，使用 input 元素创建用户名和密码输入框，具体 HTML 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <input type="text">
  </div>
  <div>
    <input type="password">
  </div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

type 类型不同时，展现的内容是不一样的，type 为 text 时是明文输入的，为 password 时输入的内容则是不可见的。

input 是行内元素，换行时建议使用 div，而不是 br。

我们也可以 type 为 time 和 date 的两个 input 元素，具体代码如下：

<div>
  <input type="time">
</div>
<div>
  <input type="date">
</div>

刷新页面，具体效果如下：

增加 type 为 file 的 input 元素，具体 HTML 代码如下：

<div>
  <input type="file">
</div>

刷新页面，效果如下：

除了这些属性值外，type 的属性值还包含了一些按钮相关的，如 submit、reset 等，设置 type 为这些值就可以让 input 元素变成一个按钮元素。

当然除了 type 属性外，还有其他属性：

readonly：只读
disabled：禁用
checked：默认被选中，只有当 type 为 radio 或者 checkbox 时可用
autofocus：当页面加载时，自动聚焦
name：名字，在提交数据给服务器时，可以用于区分数据类型
multiple：下拉列表中可以选择多个选项
selected：下拉列表中默认选中的
checked：单选和多选中默认选中的
value：取值，提交给服务时提交的值，必填

在上述 HTML 页面中增加下面几个 input 元素，并使用 type 属性以及上述几个属性，具体代码如下：

<div>
  <input type="text" readonly>
</div>
<div>
  <input type="text" disabled>
</div>
<div>
  <input type="text" autofocus>
</div>

刷新页面，效果如下：

可以看到 readonly disabled multiple autofocus 不行并不像 type 属性一样需要赋值，这种不需要赋值可以单独使用的属性被称为布尔属性。

布尔属性可以没有属性值，写上属性名就代表使用这个属性，如果要给布尔值设置属性，值就是属性名本身。

新增两个 input 元素，使用相同的布尔属性，并通过单独使用以及赋值使用的方式，具体代码如下：

<div>
  <!-- 布尔属性的设置 -->
  <input type="text" disabled autofocus readonly>
  <input type="text" disabled="disabled" autofocus="autofocus" readonly="readonly">
</div>

刷新 HTML 页面，具体效果如下：

可以看到单独使用和赋值使用的效果都是一样的，在开发中推荐使用布尔形式，就直接书写属性名就好了。

Riemann Hypothesis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML + CSS 连载 | 33 - HTML 表单

除了这些属性值外，type 的属性值还包含了一些按钮相关的，如 submit、reset 等，设置 type 为这些值就可以让 input 元素变成一个按钮元素。type 类型不同时，展现的内容是不一样的，type 为 text 时是明文输入的，为 password 时输入的内容则是不可见的。布尔属性可以没有属性值，写上属性名就代表使用这个属性，如果要给布尔值设置属性，值就是属性名本身。可以看到单独使用和赋值使用的效果都是一样的，在开发中推荐使用布尔形式，就直接书写属性名就好了。
复制链接

扫一扫

专栏目录