form表单相关知识点整理

最新推荐文章于 2024-04-19 06:24:42 发布

自动刷新

最新推荐文章于 2024-04-19 06:24:42 发布

阅读量591

点赞数 2

分类专栏： HTML5+CSS 文章标签： HTML5

本文链接：https://blog.csdn.net/weixin_44135991/article/details/88780470

版权

HTML5+CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML使用表单向服务器提交请求，表单、表单控件的主要作用就是收集用户输入，当用户提交表单时，用户输入内容将被作为请求参数提交到远程服务器。
1.form元素
功能：用于创建一个表单
重要属性：
1）action：表示当前表单中的内容提交给哪个页面进行处理
2）method:表示当前表单提交的方式，常见的有get和post方式，默认是get提交
2.input元素
表示输入框，有多种形式，可以根据type属性来确定显示哪种输入框。
在这里插入图片描述
例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>input</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<label for="username">单文本框：</label><input id="username" name="username" type="text"/><br>
不能编辑的文本框：<input id="username2" name="username" type="text" readonly="readonly"/><br>
密码框:<input id="password" name="password" type="password"/><br>
隐藏域:<input id="hidden" name="hidden" type="hidden"/><br>
第一组单选框：<br>
红：<input id="color" name="color" type="radio" value="red"/><br>
绿：<input id="color" name="color" type="radio" value="green"/><br>
第二组单选框：<br>
男性：<input id="gender" name="gender" type="radio" value="male"/><br>
女性：<input id="gender2" name="gender" type="radio" value="female"/><br>
两个复选框：<br>
<input id="website" name="website" type="checkbox" value="baidu.com"/><br>
<input id="website2" name="website" type="checkbox" value="table-zhaoxueqing.html"/><br>
文件上传域：<input id="file" name="file" type="file"/><br>
图像域：<input type="image" src="logo.png" alt="百度一下" width="27" height="31"/><br>
下面是四个按钮：<br>
<input id="ok" name="ok" type="submit" value="提交"/><br>
<input id="dis" name="dis" type="submit" value="提交" disabled/><br>
<input id="cancel" name="cancel" type="reset" value="重填"/><br>
<input id="no" name="no" type="button" value="无动作"/><br>
</form>
</body>
</html>

在这里插入图片描述
注意：
1）对于type=”radio”来说，如果你只想选择一个，需要给每个input添加一个name属性，属性值也必须一致，如果不添加，就不能满足单选框的需求。
2）input中id要和name一致。
3）对于input，最好给它添加一个name属性，作用是用于将用户输入的内容提交给要处理这个数据的页面。
4）对于input来说，它的type的默认值是text，表示单行文本。
5）每一个input标签都有一个value属性。不同类型的input， value的作用也不同。对于type=”text”来说，value可有可无，因为用户输入的内容都可以提交过去。对于type=”radio”或type=”checkbox”来说，没有value，是提交不了的。
6）GET提交与POST提交：
GET:
在这里插入图片描述
如果以get方式进行提交，但没有写上name属性，那么用户输入的内容是提交不了的，但是也会出现？这个标志：

POST：

当用户以post方式提交时，用户输入的内容不会放到地址栏里面，比较安全：

在这里插入图片描述
GET和POST小结：

GET会将用户输入的内容放到地址栏里面，使用GET请求不安全；

POST不会将用户输入的内容放到地址栏里面，相对安全。

3.select和option

作用：用来实现下拉列表。
例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>select</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
下面是简单下拉菜单：<br>
<select id="skills" name="skills">
<option value="java">java语言</option>
<option value="c">c语言</option>
<option value="ruby">ruby语言</option>
</select><br><br><br>
下面是允许多选的列表框：<br>
<select id="books" name="books"
multiple="mutiple" size="4">
<option value="java">java语言</option>
<option value="android">android语言</option>
<option value="ee">ee语言</option>
</select><br>
下面是允许多选的列表框：<br>
<select id="leegang" name="leegang"
multiple size="6">
<optgroup label="疯狂Java体系图书">
<option value="java">疯狂Java</option>
<option value="android">疯狂android</option>
<option value="ee">疯狂ee</option>
</optgroup>
<optgroup label="其他图书">
<option value="struts">struts</option>
<option value="ror">ror</option>
</optgroup>
</select><br>
<button type="submit"><b>提交</b></button><br>
</form>
</body>
</html>

在这里插入图片描述
注意：size用来设置列表框显示的行数。

4.textarea
作用：提供输入大量文本的输入框。
例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>textarea</title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
简单多行文本域：<br>
<textarea name="txt1" cols="20" rows="2"></textarea>
只读的多行文本域：<br>
<textarea name="txt2" cols="28" rows="4" readonly></textarea>
疯狂Java讲义
轻量级java
</textarea><br>
<button type="submit"><b>提交</b></button><br>
</form>
</body>
</html>

在这里插入图片描述
注意：
1）fieldset 元素可将表单内的相关元素分组，legend为 fieldset 元素定义标题。
2）autofocus 属性规定当页面加载时 input 元素应该自动获得焦点。手机端进入网页时键盘会自动弹出。
3）placeholder 属性提供可描述输入字段预期值的提示信息。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
4）autocomplete 属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
5）datalist标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
6）label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
7）getElementById()查找文档中的一个特定的元素。
8）control.value改变文本值。
9）labels[0].innerHTML改变弹框提示语。
10）文本框的selectionDirection属性针对input的text和textarea元素，当用户在这两个元素中用鼠标选取部分文字时，可以使用该元素来获取选择方向。
11）indeterminate属性设置复选框为“尚未明确选取”状态。

例：

 <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>表单</title>
    </head>
    <body>
    <form action="http://www.baidu.com" method="post">
    <fieldset name="basic">
    <legend>基本信息</legend>
    用户名：<input id="username" name="username" type="text" autofocus placeholder="请输入用户名"/><p>
    密码：<input id="password" name="password" type="password"/><p>
    </fieldset>
    <fieldset name="extra">
    <legend>附加信息</legend>
    身高：<input id="height" name="height" type="text"/><p>
    出生地：<input id="birth" name="birth" type="text"/><p>
    毕业学校：<input id="school" name="school" type="text"/><p>
    </fieldset>
    <input id="ok" name="ok" type="submit" value="提交"/>
    </form>
    <hr><br>
    <form method="post" action="buy" autocomplete="on">
    请输入图书：<input type="text" name="name" list="books"/><p>
    <input type="submit" value="购买"/>
    </form>
    <datalist id="books">
    <option value="java">java语言</option>
    <option value="android">android语言</option>
    <option value="ee">ee语言</option>
    </datalist>
    <hr><br>
    <form action="por.action" method="post" autocomplete="on">
    <label id="nameLb">姓名：
    <input type="text" name="name"/></label><p>
    <input type="submit" value="提交"/>
    <input type="button" value="重设"
    onclick="document.getElementById('nameLb').control.value='crazyit';"/>
    </form>
    <hr><br>
    <form action="por.action" method="post" autocomplete="on">
    <label>姓名：
    <input id="name" type="text" name="name"/></label></label>
    <label for="name"><small>请输入姓名</small></label><p>
    <input type="button" value="第一个"
    onclick="alert(document.getElementById('name').labels[0].innerHTML)"/>
    <input type="button" value="第二个"
    onclick="alert(document.getElementById('name').labels[1].innerHTML)"/>
    </form>
    <hr><br>
    <form action="por.action" method="post" autocomplete="on">
    <label id="nameLb">姓名：
    <input type="text" name="name"/></label></label>
    <input type="button" value="获取"
    onclick="alert(document.getElementById('nameLb').control.selectionDirection);"/>
    </form>
    <hr><br>
    <form action="por.action" method="post" autocomplete="on">
    <label id="colorLb">红色：
    <input type="checkbox" name="color"/></label><p>
    <input type="button" value="设置"
    onclick="alert(document.getElementById('colorLb').control.inddeterminate=true);"/>
    <input type="button" value="获取"
    onclick="alert(document.getElementById('colorLb').control.inddeterminate);"/>
    </form>
    </body>
    </html>

在这里插入图片描述

注意：
1）type="color"设置颜色。οnchange="a.value=this.value;"显示颜色值。
2）type="date"设置年月日。
3）type="time"设置时分。
4）type="datatime-local"生成一个本地日期,时间选择器。
5）type="month"设置年月。
6）type="week"设置年星期。
7）type="email"输入邮箱地址。
8）type="tel"输入电话号码。
9）type="url"输入链接地址。
10）type="number"输入数字。
11）type="range"让<input…/>元素生成一个拖动条,通过拖动条使得用户只能输入指定范围内,指定步长的值。
当文本框的 type= “range”时, 该文本框内还可以指定如下三个属性:
(1). min : 指定该拖动条的最小值.
(2). max : 指定该拖动条的最大值.
(3). step : 指定该拖动条的步长.
12）type="search"让<input…/>元素生成一个专门用于输入搜索关键字的文本框。
13）进度条设置：

行车速度是：<meter name="speed" value="120" min="0" max="220" low="0" height="160">
120</meter>千米/小时。<p>

14）进度条设置：

任务完成比：<progress value="30" min="0" max="100" >
30/100</progress><p>

例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>input</title>
</head>
<body>
<form action="do">
type="color"的文本框：<br><input name="color" type="color" onchange="a.value=this.value;"/>
<output name="a" for="color"></output><p>
type="date"的文本框：<br><input name="date" type="date"/><p>
type="time"的文本框：<br><input name="time" type="time"/><p>
type="datatime-local"的文本框：<br><input name="datatime-local" type="datatime-local"/><p>
type="month"的文本框：<br><input name="month" type="month"/><p>
type="week"的文本框：<br><input name="week" type="week"/><p>
type="email"的文本框：<br><input name="email" type="email" multiple/><p>
type="tel"的文本框：<br><input name="tel" type="tel"/><p>
type="url"的文本框：<br><input name="url" type="url"/><p>
type="number"的文本框：<br><input name="number" type="number" min="0" max="100" step="5" /><p>
type="range"的文本框：<br><input name="range" type="range" min="0" max="100" step="5" onchange="b.value=this.value;"/>
<output name="b" for="range"></output><p>
type="search"的文本框：<br><input name="search" type="search"/><p>
行车速度是：<meter name="speed" value="120" min="0" max="220" low="0" height="160">
120</meter>千米/小时。<p>
任务完成比：<progress value="30" min="0" max="100" >
30/100</progress><p>
<input value="提交" type="submit"/>
</form>
</body>
</html>

在这里插入图片描述

注意：required 属性规定必需在提交之前填写输入字段。如果使用该属性，则字段是必填（或必选）的。
例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>input</title>
</head>
<body>
<form action="add" method="post">
图书名：<input name="name" type="text" required/><br>
图书ISBN:<input name="isbn" type="text"
required pattern="\d{3}-\d-\d{3}-\d{5}"/><br>
图书价格:<input name="price" type="number" min="20" max="150" step="5"/><br>
<input value="提交" type="submit"/>
</form>
<h2>音频播放<h2>
<audio src="" controls>
您的浏览器不支持audio元素
</audio>
<h2>视频播放<h2>
<video src="79d.mp4" controls autoplay loop>
您的浏览器不支持video元素
</video>
</body>
</html>

在这里插入图片描述
参考链接：https://blog.csdn.net/mr_lp/article/details/50634984
https://www.bbsmax.com/A/kmzLBpnE5G/