HTML表单组件

最新推荐文章于 2024-08-20 11:01:09 发布

独孤醉人

最新推荐文章于 2024-08-20 11:01:09 发布

阅读量807

点赞数

分类专栏： web前端 & 微信小程序文章标签： html css

本文链接：https://blog.csdn.net/qq_46126537/article/details/118497826

版权

web前端 & 微信小程序专栏收录该内容

10 篇文章 1 订阅

订阅专栏

表单标签form

<form action="http://localhost/testform" method="post">
  <!--内部可添加各种表单组件-->
</form>

在这里插入图片描述

GET方法：提交表单数据时，GET方法会将表单组件的数据名称和值转换为文本形式的参数并直接加原URL地址后面，点击提交按钮后可以直接从浏览器地址栏看到全部内容。这种方式适用于传递一些安全级别要求不高的数据，并且有传输大小限制，每次不能超过2KB。
POST方法：这种方法传递的表单数据会放在HTML的表头中，不会出现在浏览器地址栏里，用户无法直接看到参数内容，适用于安全级别相对较高的数据。并且对于客户端而言没有传递数据的容量限制，完全取决于服务器的限制要求，总体来说传输的数据量比GET方法大。

输入标签input

<input type="输入类型" name="自定义名称" />

在这里插入图片描述

<input type="text" name="自定义名称" /> <!--name属性值必须是唯一的-->
<input type="text" name="username" value="admin" /> <!--单行文本框预设初始文本内容-->

<!--
相同的name属性值即可表示这些单选按钮属于同一个组
check设置默认值
-->
<input type="radio" name="gender" value="M" checked /> 男
<input type="radio" name="gender" value="F" /> 女

<input type="checkbox" name="group1" value="1"/> 朋友推荐
<input type="checkbox" name="group1" value="2" /> 搜索引擎
<input type="checkbox" name="group1" value="3" /> 媒体宣传
<input type="checkbox" name="group1" value="4" /> 其他

<!--
value属性值可以用于自定义按钮上的文字内容
submit表示提交按钮
-->
<input type="submit" value="值" />

<!--
value属性值可以用于自定义按钮上的文字内容
reset表示重置按钮
-->
<input type="reset" value="值" />

<input type="button" value="值" onclick="test()" />
<script>
function test(){
  alert('Hello HTML5!');
}
</script>

<!--
图片提交按钮image
-->
<input type="image" src="image/btn.jpg" alt="提交" />

<!--
文件上传域file
accept属性用于筛选上传文件的MIME类型
accept="image/gif"允许上传后缀名为.gif格式的图像文件
accept="image/*"表示允许上传所有类型的图片格式文件
-->
<input type="file" name="自定义名称" />

<!--
隐藏域hidden
-->
<input type="hidden" name="自定义名称" value="值" />

<!--
隐藏域hidden
-->
<label for="name">姓名：</label>
<input type="text" name="name1" id="name1" />
 <!--上下等效-->
<label>姓名：<input type="text" name="name1" /></label>

多行文本标签textarea

可以实现多行文本区域
允许文本回车换行

<textarea>
</textarea>

在这里插入图片描述
默认情况下，元素形成的多行文本框是可编辑状态，可以使用元素的readonly属性将该文本框改为只读状态，或使用disabled属性禁用该文本区域。

列表标签select

在这里插入图片描述
最常见的用法是select元素配合若干个option标签使用，形成简易的下拉菜单。option标签具有4种属性

<select>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="grape" selected>葡萄</option>
</select>

如果列表项目较多需要进行分类，可以使用标签定义选项组。
在这里插入图片描述

<select>
	<optgroup label="水果类">
		<option value="apple">苹果</option>
		<option value="banana">香蕉</option>
		<option value="grape">葡萄</option>
	</optgroup>
	<optgroup label="蔬菜类">
		<option value="apple">南瓜</option>
		<option value="banana">四季豆</option>
		<option value="grape">土豆</option>
	</optgroup>
</select>

按钮标签button

在这里插入图片描述

域标签fieldset和域标题标签legend

<form>
  <fieldset>
     <legend>域标题</legend>
     <!--其他表单组件-->
</fieldset>
</form>

在这里插入图片描述

html5新特性

在这里插入图片描述
tel类型用于输入电话号码。该类型在PC端与普通单行文本框text类型没有任何区别，但是在手机移动端使用该类型输入时会显示数字键盘，提高了用户的体验。

email类型用于输入电子邮箱地址，该类型只允许输入包含“@”字样的标准电子邮箱格式的文本内容。

url类型用于显示包含URL地址的输入框。当用户提交表单时浏览器会自动验证输入框内值是否有效。

number类型用于显示只能包含数值内容的文本输入框。还可以用max和min属性限定数值的最大值和最小值范围

range类型用于显示包含数值范围的滑动条，用户直接拖动滑动条上的点进行数据值的选择。

<input type="range" name="range01" min="最小数值" max="最大数值" step="数值间隔"  />

input标签中与时间日期选择相关的type属性值分为以下6种：

datetime类型：可用于选择包含年月日和时间的内容（时间为UTC时间）。
datetime-local类型：可用于选择包含年月日和时间的内容（时间为本地时间）。
time类型：可用于选择时间，包括小时和分钟。
date类型：可用于选择年月日。
week类型：可用于选择年份和第几周。
month类型：可用于选择年份和月份。

search类型用于显示搜索域，例如谷歌搜索，站内搜索等，显示效果为普通单行文本框。

网站地址：<input type="search" name="search" />

color类型用于显示颜色选择器

颜色：<input type="color" name="color" />

新元素标签datalist

提示选项初始为隐藏状态，当焦点位于对应的文本输入框时会在下方自动展开提示选项，用户可以通过点击提示选项自动生成文本内容。
在这里插入图片描述

<datalist>
<option value="值1">选项一</option>
<option value="值2">选项二</option>
<option value="值3">选项三</option>
</datalist>

新元素标签output

在这里插入图片描述

<input type="range" name="range1" id="range1" min="0" max="100" step="1" value="0" />
<output name="output1" for="range1" >0</output>

新属性

autofocus属性使得指定的输入框在页面加载时自动成为焦点，该属性适用于所有标签的类型。

<input type="password" name="pwd" autofocus />

form属性可以指定input元素从属于哪个表单，同一个input元素可以属于一个甚至多个表单。该属性适用于所有input标签的类型。

<form id="form1">
    <!--内容略-->
</form>
<form id="form2">
    <!--内容略-->
</form>
<input id="username" type="text" form="form1, form2" />

以formaction为首的一系列属性被称为表单重写属性（form override attributes），它们可以用于更改表单的一些属性设置，并且仅适用于类型为submit或image的input标签。
在这里插入图片描述
如果表单标签form中设置的属性在提交按钮中进行了重写，则会优先使用提交按钮中设置的表单重写属性。

<form method="get">
<!--内容略-->
    <input type="submit" value="提交" formmethod="post" />
</form>

虽然form标签设置了method属性值为"get"，但是当点击提交按钮时，该属性值会被更新为"post"。

利用这些表单重写属性可以方便在同一个表单中设置多个不同的提交按钮，并可以为这些提交按钮分别设置各自的属性，它们互相不会产生干扰。

<form method="post">
<!--内容略-->
<input type="submit" value="注册" formaction="register" />
<input type="submit" value="登陆" formaction="login" />
</form>

点击“注册”或“登陆”按钮时会分别将数据提交给不同的服务器地址进行处理。

placeholder属性为input类型提供了提示功能，该提示会在空白输入框中出现，当输入框获得焦点时提示消失。该属性适用于input标签的6种常见类型：text（单行文本框）、search（搜索框）、url（URL地址）、tel（电话）、email（电子邮箱）和password（密码框）。

<input type="text" name="username" placeholder="请输入用户名" />

required属性要求在提交之前必须在输入框内填写内容，提交时输入框不能为空。该属性适用于标签常用的11种类型：text（单行文本框）、search（搜索框）、url（URL地址）、tel（电话）、email（电子邮箱）、password（密码框）、date pickers（日期选择器）、number（数值）、checkbox（多选按钮）、radio（单选按钮）和file（上传文件控件）。

用户名：<input type="text" name="usrname" required />

multiple属性可以允许input标签同时输入多个值。该属性只适用于2种类型的标签：email（电子邮箱）和file（上传文件控件）。

选择文件：<input type="file" name="file" multiple />

pattern属性用于约束输入域的内容，该属性以正则表达式的方式对输入内容进行规范。关于正则表达式的用法可参考第四章JavaScript基础中正则表达式（RegExp）类型的教程。该属性适用于6种标签：text（单行文本框）、 search（搜索框）、 url（URL地址）、 tel（电话）、 email （电子邮箱）以及 password（密码框）。例如：

<input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />

list属性可以为输入框提供一系列选项提示，需要与数据列表标签datalist配合使用。数据列表标签datalist是输入域的提示选项列表，当输入域获得焦点时，提示选项列表会自动展开。该属性适用于9种input标签：text（单行文本框）、search（搜索框）、url（URL地址）、tel（电话）、email（电子邮箱）、date pickers（日期选择器）、number（数值）、range（数值范围）、和color（颜色选择器）。

autocomplete属性表示在form或input域中为用户正在输入的内容显示曾经填写过的内容选项，其属性值有on（开启）或off（关闭）两种情况。该属性同时适用于form标签和9种<input标签：text（单行文本框）、search（搜索框）、url（URL地址）、tel（电话）、email（电子邮箱）、password（密码框）、date pickers（日期选择器）、range（数值范围）和color（颜色）。

novalidate属性表示在表单提交时不验证form或input域的内容，其属性值有true（真）或false（假）两种情况。该属性同时适用于标签和9种标签：text（单行文本框）、search（搜索框）、url（URL地址）、tel（电话）、email（电子邮箱）、password（密码框）、date pickers（日期选择器）、range（数值范围）和color（颜色）。