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

文阿花

已于 2024-06-03 15:20:50 修改

阅读量546

点赞数

分类专栏： HTML 文章标签： html

于 2021-03-25 16:42:26 首次发布

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

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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 在数据周围绘制边框

<!--在数据周围绘制边框 -->
<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的安全性更高。

5.10 form属性

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

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>

运行效果：
在这里插入图片描述
更多示例详见：
HTML 输入类型
 HTML属性
 HTML Input form* 属性

附完整代码：

<!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>登录页| BOSS业务平台</title>
</head>
<!-- 整体背景色 -->
<!-- <body bgcolor="pink"> -->
<!-- <body bgcolor="#123232"> -->
<!-- <body bgcolor="rgb(0,0,0)"> -->
<!-- <body bgcolor="#ffffff"></body> -->


<!-- 文本框 -->
<form>
    用户名：
    <input type="text" name="user"></input>
    密码：
    <input type="password" name="password"></input>
</form>
<br />
<form>
    手机号：
    <input type="text" name="phone" />
    <br />
    密码：
    <input type="password" name="psw" />
</form>
<br />
<!-- 单选框 name属性必须一致，才能实现单选效果 value值要不一致-->
<form>
    性别：
    <br />
    <input type="radio" name="sex" value="sale" checked="true" />
    女
    <br />
    <input type="radio" name="sex" value="saleman" />
    男
</form>
<br />
<!-- 复选框 -->
<form>
    你最喜欢的交通工具是：
    <br />
    <input type="checkbox" name="bick" />
    自行车
    <br />
    <input type="checkbox" name="car" />
    汽车
</form>
<br />
<!-- 下拉框 -->
<form>
    <select name="phones">
        <option value="XiaoMi">XiaoMi</option>
        <option value="XiaoMi">Iphone</option>
        <option value="XiaoMi">HuaWei</option>
    </select>
</form>
<br />
<!-- 按钮 -->
<form>
    <input type="button" value="点击" />
</form>
<br />
<!-- 在数据周围设置边框 -->
<form>
    <fieldset>
        用户名：
        <input type="text" name="userName" />
    </fieldset>
</form>
<br />
<!-- 在数据周围设置边框+提示语 -->
<form>
    <fieldset>
        <legend>登录信息</legend>
        用户名：
        <input type="text" name="userName" />
    </fieldset>
</form>

<br />
<!-- 带跳转事件的按钮 action+submit(数据想要被正确提交，必须要有name字段) -->
<h4>带跳转事件的按钮</h4>
<form action="html_jump_page.html">
    <input type="submit" value="登录" />
</form>
<!-- Method使用 -->
<!-- Get -->
<h4>Method使用之Get</h4>
<br/>
<form action="html_jump_page.html" method="get">
 用户名：
 <input type="text" name="userName" />
 <br/>
 密码：
 <input type="password" name="psw"/>
 <br/>
 <input type="submit" value="登录"/>
</form>
<!-- Post -->
<h4>Method使用之Post</h4>
<form action="html_jump_page.html" method="post">
    用户名：
    <input type="text" name="userName" />
    <br/>
    密码：
    <input type="password" name="psw"/>
    <br/>
    <input type="submit" value="登录"/>
</form>
<!-- 输入限制  form属性 -->
<h4>输入限制 类型：数字  最小值  最大值</h4>
<form action="html_jump_page.html">
    <input type="number" min="1" max="100" step="10" value="11"/>
<br/>
<input type="submit"/>
</form>
<br/>
<h4>日期输入</h4>
<form action="html_jump_page.html">
    输入2024.04.15之前的日期
    <input type="date" name="mydate" max="2024-04-15"/>

</form>
<h4>选择你喜欢的颜色</h4>
<form>
    <input type="color" name="mycolor"/>
</form>

<h4>滑动控件</h4>
<form>
    <input type="range" name="myrange" min="0" max="100" value="10"/>
</form>
</body>


</html>