HTML学习笔记：（五）常见表单和输入示例

文阿花

已于 2024-04-25 09:16:40 修改

阅读量778

点赞数 10

文章标签： html 学习笔记

于 2024-04-19 16:55:16 首次发布

本文链接：https://blog.csdn.net/wz_1992/article/details/137970888

版权

5、常见表单和输入示例

表单的作用在于搜集不同类型的用户输入

使用form+input标签
F:\Html\MyHtmls1\normalKongJian\html_formandinput.html

5.1 文本域

type=“text”

<html>
<body>
<!--文本域 -->
<h4>文本域：</h4>
<form>
名：
<input type="text" name="firstname"></input>
<br >
姓：
<input type="text" name="seconedname"></input>
</form>
</body>
</html>

运行效果：
在这里插入图片描述

5.3 密码域

type=“password”

<!--密码域 -->
<html>
<body>
<h4>密码域：</h4>
<p>请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。</p>
<form>
用户名：
<input type="text" name="user"></input>
密码：
<input type="password" name="password"></input>
</form>
</body>
</html>

运行效果：
在这里插入图片描述

5.3 复选框

type=“checkbox” 其中name值最好不同

<!--复选框 -->
<html>
<body>
<h4>复选框:name属性设值最好不一样</h4>
<form>
我喜欢：
<br >
自行车:
<input type="checkbox" name="bike"></input>
<br >
汽车：
<input type="checkbox" name="car"></input>
</form>
</body>
</html>

运行效果：
在这里插入图片描述

5.4 单选框

type=“radio”
name属性必须一致，才能实现单选效果 value值要不一致

<!--单选框 -->
<html>
<body>
<h4>单选框：name属性必须一致，才能实现单选效果  value值要不一致</h4>
<form>
男：
<input type="radio" checked="true" name="Sex" value="male"></input>
女：
<input type="radio" name="Sex" value="female"></input>
</form>
</body>
</html>

运行效果：
在这里插入图片描述

5.5 下拉列表

select+option标签实现下拉列表

<!--下拉列表 -->
<html>
<body>
<h4>下拉列表</h4>
<form>
<select name="phones">
<option value="vivo">Vivo</option>
<option value="oppo">Oppo</option>
<option value="huawei">HuaWei</option>
<option value="xiaomi" selected="selected">XiaoMi</option>
</select>
</form>
</body>
</html>

运行效果：
在这里插入图片描述

5.6 创建按钮

type=“button”

<!--创建按钮 -->
<html>
<body>
<h4>按钮</h4>
<form>
<input type="button" value="点击"></input>
</form>
</body>
</html>

运行效果：

在这里插入图片描述

5.7 在数据周围绘制边框

<fieldset> 元素组合表单中的相关数据

<legend> 元素为 <fieldset> 元素定义标题。

<!--在数据周围绘制边框 -->
<html>
<body>
<h4>在数据周围绘制边框</h4>
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text"></input>
体重：<input type="text"/>
</fieldset>
</form>
</body>
</html>

运行效果：
在这里插入图片描述

5.8 带按钮跳转的使用（ submit）

（1）带按钮和输入框的表单

submit+action 点击submit跳转至action 对应的文档
数据想要被正确提交，必须要有name字段

<!--带按钮和输入框的表单 -->
<html>
<body>
<h4>带按钮和输入框的表单  点击按钮跳转至action标签中设置的页面</h4>
<form action="html_action.html">
手机号：
<input type="phones" name="mobile" value="18339995540"></input>
<br >
密码：
<input type="password" name="password" value="123456"></input>
<br >
<input type="submit" value="登录"></input>
</form>
</body>
</html>

运行效果：
在这里插入图片描述
（2）带复选框和按钮的表单

submit+action 点击submit跳转至action 对应的文档
数据想要被正确提交，必须要有name字段

<!--带复选框的表单 -->
<html>
<body>
<h4>带复选框和按钮的表单</h4>
<form action="html_action.html">
选择性别：
<br >
女
<input type="checkbox" name="male" ></input>
<br >
男
<input type="checkbox" name="female" ></input>
<br >
<input type="submit" value="下一页"></input>
</form>
</body>
</html>

（3）带单选框和按钮的表单

submit+action 点击submit跳转至action 对应的文档
数据想要被正确提交，必须要有name字段

<!--带单选框的表单 -->
<html>
<body>
<h4>带单选框和按钮的表单</h4>
<form action="html_action.html">
性别：
<br >
男
<input type="radio"  name="Sex" checked="true" value="male"></input>
<br >
女
<input type="radio" name="Sex" value="female"></input>
<br >
<input type="submit" value="下一页"></input>
</form>
</body>
</html>

5.9 Method属性的使用

method有GET和POST两种方法

何时使用GET（默认）:

如果表单的提交是被动地，并且没有敏感信息

<html>
<body>
<!--带按钮和输入框的表单 -->
<h4>带按钮和输入框的表单  点击按钮跳转至action标签中设置的页面</h4>
<form action="html_action.html" method="GET">
手机号：
<input type="phones" name="mobile" value="18339995540"></input>
<br >
密码：
<input type="password" name="password" value="123456"></input>
<br >
<input type="submit" value="登录"></input>
</form>
</body>
</html>

运行效果：
点击按钮后：

使用GET表单信息在浏览器中是可见的

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

何时使用POST:

如果表单正在更新数据，并或者包含敏感信息（例如密码）

<html>
<body>
<!--带按钮和输入框的表单 -->
<h4>带按钮和输入框的表单  点击按钮跳转至action标签中设置的页面</h4>
<form action="html_action.html" method="POST">
手机号：
<input type="phones" name="mobile" value="18339995540"></input>
<br >
密码：
<input type="password" name="password" value="123456"></input>
<br >
<input type="submit" value="登录"></input>
</form>
</body>
</html>

运行效果：
点击按钮后：

使用POST表单信息在浏览器中是不可见的

注释：POST的安全性更高。

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL
永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）
URL 的长度受到限制（2048 个字符）
对于用户希望将结果添加为书签的表单提交很有用
GET 适用于非安全数据，例如 Google 中的查询字符串

关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）
POST 没有大小限制，可用于发送大量数据。
带有 POST 的表单提交无法添加书签

提示：如果表单数据包含敏感信息或个人信息，请务必使用 POST！

5.10 form属性

以下为form的属性
在这里插入图片描述
示例：

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form>

5.10.1 `Action` 属性

action 属性定义提交表单时要执行的操作。

<!--输入限制 -->
<html>
<body>
<h4>输入限制</h4>
<form action="html_action.html">
Quantity:
<input type="number" min="0" max="100" step="10" value="20">
<input type="submit">
</body>
</html>

5.10.2 `Method` 属性（具体用法参考5.9）

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

<form action="action_page.php" method="GET">

或：

<form action="action_page.php" method="POST">

5.10.2.1 何时使用 `GET`？

您能够使用 GET（默认方法）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

action_page.php?firstname=Mickey&lastname=Mouse

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

5.10.2 .2 何时使用 `POST`？

您应该使用 POST：

如果表单正在更新数据，或者包含敏感信息（例如密码）。

POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

5.10.3 `Name` 属性

如果要正确地被提交，每个输入字段必须设置一个 name 属性。

<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

5.10.4 `Target` 属性

target 属性规定提交表单后在何处显示响应。

详细信息请参考HTML学习之链接target属性

5.10.5 `Autocomplete` 属性

autocomplete 属性规定表单是否应打开自动完成功能。
启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值。

<!DOCTYPE html>
<html>
<body>

<h1>form autocomplete 属性</h1>

<p>请填写并提交表单，然后重新加载页面，再次开始填写表单 - 查看 autocomplete 的工作原理。</p>

<p>然后，请尝试把 autocomplete 设置为 "off"。</p>

<form action="/demo/html/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="email">Email:</label>
  <input type="text" id="email" name="email"><br><br>
  <input type="submit">
</form>

</body>
</html>

运行效果：
在这里插入图片描述

5.10.6 所有属性

所有属性的列表：
在这里插入图片描述

5.11 输入限制

<!--输入限制 -->
<html>
<body>
<h4>输入限制</h4>
<form action="html_action.html">
Quantity:
<input type="number" min="0" max="100" step="10" value="20">
<input type="submit">
</body>
</html>

运行效果：
在这里插入图片描述

以下为输入的限制
在这里插入图片描述

5.12 各种输入类型示例

(1)日期输入

<!--日期 -->
<html>
<body>
<h4>日期date的使用</h4>
<form action="html_action.html">
输入2021-12-31之前的日期：
<input type="date" max="2021-12-31" name="bdate">
<input type="submit"><br >
输入1992-12-31之后的日期：
<input type="date" min="1992-12-31">
<input type="submit">
</form>
</body>
</html>

运行效果：
在这里插入图片描述

<!--颜色 -->
<html>
<body>
<h4>颜色color的使用</h4>
<form action="html_action.html">
选择你喜欢的颜色：
<input type="color" value="#FFA500">
<input type="submit">
</form>

<!--滑动控件 -->
<h4>滑动控件</h4>
<form action="html_action.html">
<input type="range" name="points" min="0" max="100">
<input type="submit">
</form>



<!--年份+月份 -->
<h4>month的使用</h4>
<form action="html_action.html">
生日（月和年）：
<input type="month" name="bdate">
<input type="submit"><br >
</form>

</body>
</html>