（12）html表单<form>之一

最新推荐文章于 2024-11-02 11:15:20 发布
最新推荐文章于 2024-11-02 11:15:20 发布
阅读量608 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： html学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mxd395/article/details/23895429
本文详细介绍了HTML表单的各种元素及其属性，包括文本输入框、密码框、复选框、单选按钮、下拉列表、文件上传控件等，并通过实例展示了如何使用这些表单元素。

form主要用于收集用户反馈的信息，需要注意的是form不能嵌套form。即使网页中有多个form，用户每次也只能向服务器发送一个表单的数据。

（一）<form>元素的主要特性

1. action特性指示提交的表单交由服务器上的那一个程序处理，如：action=“***.php”

2. method特性指明表单数据以何种形式发送给服务器（get或者post）

3. id和name特性，都唯一标识网页中的form元素

4. onsubmit特性常用于在表单提交给服务器之前，浏览器端对提交数据进行检查，onsubmit的值通常是一个JS的函数，该函数一般定义在<head>元素中。

5. onreset特性的值也是一个JS函数，若表单包含一个reset按钮用于清楚表单所有数据，当reset按钮按下时，先调用onreset特性的值对应的脚本程序。

6. enctype特性用于在以post方式向服务器发送数据时指定浏览器的编码方式。共有两种编码方式：

application/x-www-form-urlencoded：这也是默认方式，将+，空格等非字母数字字符转换为其他字符以传送给服务器端。

multipart/form-data：该方式允许将数据以多个部分的方式进行发送，每个连续部分对应一个完整表单控件，常用于用户向服务器传送文件或照片时。每部分有一个可选内容类型头来指明控件数据类型。

7. accept-charset特性用于指明一系列用户可能输入且服务器能够处理的字符编码格式，如UTF-8等，以空格或逗号隔开字符集列表。

8. target特性指明表单提交后，将在那个窗口打开表单结果。


（二）表单控件——用于从网站访问者收集反馈数据

1. 单行文本输入控件——<input>，特性如下：

type：必有特性，值为text时，创建的文本框输入为明文；值为password时，文本框输入会隐藏

name：必有特性，用于服务器接收端名称与值对应。

value: 为文本输入空间提供一个初始值。

size：指定文本输入空间的宽度，单位为字符。

maxlength：指定文本框能够输入的最大字符数。

还可跟其他通用特性以及disable，readonly，tabindex等特性以及UI事件。

2. 多行文本输入控件——<textarea>，特性如下：

name：必有特性，用于服务器接收端名称与值对应。

rows：指定行数，即文本区高度。

cols：指定文本列数，即文本区宽度。

还可跟其他通用特性以及disable，readonly，tabindex等特性以及UI事件。

3. 按钮——常用于表单提交或者触发脚本

（1）使用<input>元素创建按钮，特性如下：

type：必有特性，指定按钮类型，type="submit"则点击按钮提交表单；type=“button”创建点击按钮时触发客户端脚本按钮；type="reset"创建加载网页时能自动将表单控件重置为初始值的按钮。

name：必有特性，用于服务器接收端名称与值对应。

value： 用于指定按钮上显示的文本。

onclick：用于点击按钮时出发一个脚本，其值为JS的函数名。

还可跟其他通用特性以及disable，readonly，tabindex等特性以及UI事件。

（2）使用<input>元素创建图像按钮

<input type="image" src="submit.png" alt="image_submit" name="image_submit" />

type：必有特性，指定按钮类型，type="image"。

src：制定图像文件来源。

alt：为图像提供备选文本，当无法加载图像时，显示该文本。

点击该图像，浏览器就像服务器提交表单，其中该按钮提交的是图像name.x和name.y坐标

（3）使用<button>元素创建图像按钮(与input类似)

	<button type="submit">button_submit</button>
	<button type="reset">button_reset</button>
	<button type="button" onclick="button_img()"><img src="submit.png" alt="button_img"></button>
元素创建图像按钮(与input类似)

4. 复选框——<input type=“checkbox”>，特性如下：

type：必有特性，type=“checkbox”

name：必有特性，控件名称，多个复选框可以共享同一个名称。

value： 复选框选中时，该value的值传递给服务器端，默认value值为“on”。

checked： 用于指示该复选框已经选中。

还可跟其他通用特性以及disable，readonly，tabindex等特性以及UI事件。

5. 单选框——<input type=“radio”>，特性如下：

type：必有特性，type=“radio”

name：必有特性，控件名称，多个单选框可以共享同一个名称。

value： 用于指示该选项选中时发送给服务器的值。

checked： 用于指示该单选框已经选中。

size：指示单选按钮的大小。

还可跟其他通用特性以及disable，readonly，tabindex等特性以及UI事件。

6. 下拉框——<select>和<option>，特性如下：

	<select name="select_test" >
		<option selected="selected" value="1">小学</option>
		<option value="2">初中</option>
		<option value="3">高中</option>
		<option value="4">大学</option>
		<option value="5">硕士</option>
		<option value="6">博士</option>
	</select>

<select>元素包含以下特性：

name：控件名称，唯一标识该下拉框。

size：用于表示一个滚动列表，指定同时有多少条目可以看到。

multiple： 变为多选下拉框，可以选中多条记录（按住ctrl键实现多选）。

<option>元素包含以下特性：

select：用于指定加载网页时哪一个项被默认选中。

value： 用于指示该选项选中时发送给服务器的值。

label：为选项设置标签的一种替换方式。

使用<optgroup>元素和label特性进行分组选项：
	<select name="optgroup_test">
		<optgroup label="language">
			<option value="PHP">PHP</option>
			<option value="JAVA">JAVA</option>
		</optgroup>
		<optgroup label="system">
			<option value="win">Windows</option>
			<option value="unix">Unix</option>
			<option value="linux">Linux</option>
		</optgroup>
	</select>
7.用于文件上传的文本选择框——<input type=“file”>，特性如下

type：必有特性，type=“file”

name：必有特性，控件名称。

需要注意的是：有文件上传时，建议将<form>的的enctype特性的值设置为multipart/form-data,从而使每个控件的数据独立的发送给服务器端。

8.隐藏空间——<input type=“hidden”>
有时希望在网页间传递信息而不让用户在网页上看到（审查代码时可以看到）。

9.标签——<label>

	<label for="username">用户名</label>
	<input type="text" id="username" name="username"  value="xdm" />

如上所示，label使用了for特性指明与该标签相关的表单控件，for特性的值须与控件id相对应。也可以不使用for特性而是用如下形式：<label>用户名<input type=“text” name=“username” value=“xdm” /> </label>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
	<head>
		<meta charset="utf-8" />  
		<base href="/testsmarty/templates/"></base>
		<title>表单学习</title>
	</head>
	
	<body>
		<form method="post" enctype="multipart/form-data">
			<table border="1">
				<tr>
					<td><label for="username">用户名</label></td>
					<td colspan="3">
						<input type="text" id="username" name="username"  value="xdm" />
					</td>
				</tr>
				<tr>
					<td>密码</td>
					<td colspan="3">
						<input type="password" name="password"  value="123456" />
					</td>
				</tr>
				<tr>
					<td>性别</td>
					<td><input type="radio" name="radio_test" value="boy" checked="checked">男</td>
					<td colspan="2"><input type="radio" name="radio_test" value="girl">女</td>
				</tr>
				<tr>
					<td>最高学历</td>
					<td colspan="3">
						<select name="select_test" >
							<option selected="selected" value="1">小学</option>
							<option value="2">初中</option>
							<option value="3">高中</option>
							<option value="4">大学</option>
							<option value="5">硕士</option>
							<option value="6">博士</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>掌握自然语言</td>
					<td colspan="3">
						<select name="multiple_test" multiple="multiple">
							<option selected="selected" value="1">英语</option>
							<option value="2">中文</option>
							<option value="3">日语</option>
							<option value="4">德语</option>
							<option value="5">法语</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>爱好</td>
					<td colspan="3">
						<textarea name="beizhu" rows="3" cols="20"></textarea>
					</td>
				</tr>
				<tr>
					<td>前端技能：</td>
					<td><input type="checkbox" name="checkbox_test" checked="checked" value="CSS">CSS</input></td>
					<td><input type="checkbox" name="checkbox_test" checked="checked" value="HTML">HTML</input></td>
					<td><input type="checkbox" name="checkbox_test" value="JS">JS</input></td>
				</tr>
				<tr>
					<td>其他技能</td>
					<td colspan="3">
						<select name="optgroup_test">
							<optgroup label="language">
								<option value="PHP">PHP</option>
								<option value="JAVA">JAVA</option>
							</optgroup>
							<optgroup label="system">
								<option value="win">Windows</option>
								<option value="unix">Unix</option>
								<option value="linux">Linux</option>
							</optgroup>
						</select>
					</td>
				</tr>
				<tr>
					<td>简历文件</td>
					<td colspan="3">
						<input type="file" name="fileupload">
					</td>
				</tr>					
				<tr>
					<td><input type="submit" name="input_submit" value="input_submit" /></td>
					<td><input type="reset" name="input_reset" value="input_reset" /></td>
					<td colspan="2"><input type="button" name="input_button" value="input_button" onclick="input_buttom()" /></td>
				</tr>
				<tr>
					<td colspan="4"><input type="image" src="submit.png" alt="image_submit" name="image_submit" /></td>
				</tr>
				<tr>
					<td><button type="submit">button_submit</button></td>
					<td><button type="reset">button_reset</button></td>
					<td colspan="2"><button type="button" onclick="button_img()"><img src="submit.png" alt="button_img"></button></td>
				</tr>			
			</table>
		</form>
	</body>
</html>

这里我们给出一个总结效果图： 














                

        

    

    
  



    



                



	

		

			

				
					
HTML入门-第十二篇：HTML表单标签（＜form＞）基础

				
			

			

				

					无
				

				

					04-03
					
					784
					
				

			

		

		

			
				
在网页开发中，表单是实现用户与服务器交互的重要元素。通过表单，用户可以输入各种信息，如登录凭证、反馈意见等，这些数据随后被提交到服务器进行处理。在HTML中， 标签用于创建表单。 标签就像是一个容器，它将各种表单元素（如输入框、按钮、下拉菜单等）组合在一起，定义了一个用户输入区域。当用户在表单中填写完信息并提交时，表单内的数据会按照设定的规则发送到服务器。 属性是  标签的关键属性之一，它指定了表单数据提交的目标URL。这个URL指向服务器上处理表单数据的脚本或程序。例如，如果你的服务器端使用PHP来处理表

			
		

	



                

            
              



	

		

			

				
					
HTML入门-第十三篇：HTML表单标签（＜form＞）之选择类元素

					
最新发布

				
			

			

				

					无
				

				

					04-03
					
					1057
					
				

			

		

		

			
				
在HTML表单中，单选按钮用于让用户从多个选项中选择一个。这在需要用户做出单一选择的场景中非常有用，比如选择性别、选择支付方式等。单选按钮通过  标签创建。为了确保用户只能从一组选项中选择一个，同一组的所有单选按钮必须具有相同的  属性值。当用户点击某个单选按钮时，同组中其他已选中的单选按钮会自动取消选中状态。以下是一个使用单选按钮让用户选择性别的示例代码：
在上述代码中：复选框与单选按钮不同，它允许用户从多个选项中选择多个项目。这在需要用户进行多项选择的场景中经常使用，比如选择兴趣爱好、选择服务条款等。复

			
		

	



              


  
              

                


	

		

			

				
					
前端开发基础三件套——HTML/CSS/JavaScript

				
			

			

				

					weixin_43838265的博客
				

				

					08-17
					
					438
					
				

			

		

		

			
				
JS代码加载完成之后会立即执行，执行时会阻塞页面的内容，阻塞DOM树创建，所以一般将所有的JS放到标签底部。DOMContentLoaded 文档DOM结构加载完成时触发的事件，在load事件之前(1) 区别：defer 浏览器会异步下载JS文件不会影响后续DOM的渲染，但当有多个script设置了defer属性时，会按照顺序进行加载。defer 脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行。

			
		

	





	

		

			

				
					
html 文本框 p,Javascript实现HTML表单form多个HttpPost请求

				
			

			

				

					weixin_39956612的博客
				

				

					06-05
					
					238
					
				

			

		

		

			
				
方法一：适合表单数据一致的情况，仅修改Post地址表单from如下所示：用户：密码：对应js代码：//登入函数function login(){document.myForm.action="http://localhost/login";document.myForm.submit();}//登出函数function logout(){document.myForm.action="http:/...

			
		

	



		

			
		



	

		

			

				
					
HTML中Form表单的使用

					
热门推荐

				
			

			

				

					pan_junbiao的博客
				

				

					06-20
					
					5万+
					
				

			

		

		

			
				
1、form表单标记

表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。

<form>标记的基本语法如下：


<form action="url" method="get | post" name="formName" onsubmit="" target="">
</for...

			
		

	





	

		

			

				
					
表单提交与重置事件

				
			

			

				

					resoursekey的博客
				

				

					07-06
					
					4722
					
				

			

		

		

			
				
表单提交事件（onsubmit）是在用户提交表单时（通常使用“提交”按钮，也就是将按钮的type属性设为submit），在表单提交之前被触发，因此，该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性。表单重置事件（onreset）与表单提交事件的处理过程相同，该事件只是将表单中的各元素的值设置为原始值。一般用于清空表单中的文本框。格式：&lt;form na...

			
		

	





	

		

			

				
					
HTML的基础标签和HTML的Form表单

				
			

			

				

					qq_64201116的博客
				

				

					08-10
					
					576
					
				

			

		

		

			
				
侧重学习web安全的HTML

			
		

	





	

		

			

				
					
HTML表单标签＜form＞＜/form＞，保证看完就懂

				
			

			

				

					muweichang的博客
				

				

					08-30
					
					2177
					
				

			

		

		

			
				
> 表单可以接收用户输入的信息，然后将其发送到后端应用程序，例如 PHP、Java、Python
> 等，后端应用程序将根据定义好的业务逻辑对表单传递来的数据进行处理。
> 


> 表单属于 HTML
> 文档的一部分，其中包含了如输入框、复选框、单选按钮、提交按钮等不同的表单控件，用户通过修改表单中的元素（例如输入文本，选择某个选项等）来完成表单，通过表单中的提交按钮将表单数据提交给后端程序。

`单独写出from标签是不能完成发送数据的，需要配合其他组件的使用`...

			
		

	





	

		

			

				
					
表单元素盘点第二弹＜form＞＜textarea＞元素详细介绍

				
			

			

				

					GUIDM的博客
				

				

					05-04
					
					2200
					
				

			

		

		

			
				
表单元素第一弹，适合新手小白！学生党笔记使用！

			
		

	





	

		

			

				
					
HTML 标签属性——＜a＞、＜img＞、＜form＞、＜input＞、＜table＞ 标签属性详解

				
			

			

				

					Allen-
				

				

					11-02
					
					1185
					
				

			

		

		

			
				
HTML元素除了可以使用全局属性外，还有许多特定于某些元素的属性。这些特定属性能够极大地增强元素的功能性和用户体验。

			
		

	





	

		

			

				
					
HTML5中的`＜button＞`元素引入了一个新的`formaction`属性，它允许你指定当这个按钮关联到表单提交时

				
			

			

				

					BLOG域名:programb.blog.youkuaiyun.com
				

				

					06-26
					
					525
					
				

			

		

		

			
				
另外，GET请求可能不是幂等的（即多次执行会产生不同的结果），而POST通常是幂等的，除非服务器明确设计非幂等行为。这意味着GET请求的数据对URL可见，而POST请求的数据通常不会显示在地址栏。: 这种方法通常用于敏感信息（如密码）的提交，因为数据会被包含在请求体中，不会显示在URL上，增加了安全性。因此，选择GET还是POST应基于具体场景的需求，比如查询数据时首选GET，提交表单或发送大量数据时选用POST。: GET请求由于其数据可被缓存，而POST请求通常不允许缓存，以保证每次请求都是最新的。

			
		

	





	

		

			

				
					
Html form表单脚本

				
			

			

				

					qq_38932407的博客
				

				

					04-14
					
					1047
					
				

			

		

		

			
				
HTML<form>，在js中属于HTMLFormElement类型

HTMLFormElement的属性和方法

acceptCharset:服务器能够处理的字符集；相当于HTML中的accept-charset特性。
	action:接受请求的URL;相当于HTML中的action 的特性
	elements:表单中所有控件的集合(HTMLCollection)
	enctype...

			
		

	





	

		

			

				
					
html表单实例：多版本用户反馈表单页面代码|手把手教学」Vue 3 + Element Plus 表单实战：从零到一构建用户反馈页面前端新手必学！Vue 3 + Element Plus 实现

				
			

			

				

					南北极之间
				

				

					05-08
					
					1万+
					
				

			

		

		

			
				
html表单实例：多版本用户反馈表单页面代码|手把手教学」Vue 3 + Element Plus 表单实战：从零到一构建用户反馈页面前端新手必学！Vue 3 + Element Plus 实现html表单实例：多版本用户反馈表单页面代码|手把手教学」Vue 3 + Element Plus 表单实战：从零到一构建用户反馈页面前端新手必学！Vue 3 + Element Plus 实现html表单实例：多版本用户反馈表单页面代码|手把手教学」Vue 3 + Element Plus 表单实战：从零到一构建用

			
		

	





	

		

			

				
					
[HTML5]：所有表单元素的使用方式(附元素属性)

				
			

			

				

					我只是个程序员。
				

				

					09-10
					
					3016
					
				

			

		

		

			
				
在HTML文档中，表单用于在网页中收集用户输入的数据，负责数据采集功能，表单元素有如下标签。

定义一个表单，用于申明采集数据的区域范围。里面可以嵌套其他表单元素

			
		

	





	

		

			

				
					
（13）html表单<form>之二使用〈fieldset〉和〈legend〉结构化表单

				
			

			

				

					mxd
				

				

					04-18
					
					1639
					
				

			

		

		

			
				
在html表单form>

			
		

	





	

		

			

				
					
（7）html链接与导航

				
			

			

				

					mxd
				

				

					04-16
					
					1481
					
				

			

		

		

			
				
URL简介：
URL即统一资源定位符，用于指定

			
		

	





	

		

			

				
					
（15）html表单之四“readonly”“disabled”“tabindex”和"accesskey"

				
			

			

				

					mxd
				

				

					04-18
					
					1286
					
				

			

		

		

			
				
（一）readonly与

			
		

	





	

		

			

				
					
（6）html的核心元素与特性组

				
			

			

				

					mxd
				

				

					04-16
					
					1039
					
				

			

		

		

			
				
HTML文档主要由四个元素构成：

			
		

	





	

		

			

				
					
本关任务：创建一个表单<form>节点。

				
			

			

				

					04-02
				

			

		

		

			
				
### 创建 HTML 表单节点

在 HTML 中，可以通过 `<form>` 元素创建一个表单节点。`<form>` 是用于收集用户输入的标准 HTML 元素之一。为了使表单能够与服务器交互，通常需要设置 `action` 属性来指定处理表单数据的目标 URL[^1]。

以下是创建基本 HTML 表单节点的示例：

```html
<form action="/submit-form" method="post">
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"><br><br>
  
  <label for="password">密码:</label>
  <input type="password" id="password" name="password"><br><br>
  
  <input type="submit" value="提交">
</form>
```

在这个例子中：
- `action="/submit-form"` 定义了当用户点击“提交”按钮时，表单数据会被发送到 `/submit-form` 路径。
- `method="post"` 指定了 HTTP 请求方法为 POST，这意味着数据将以加密形式传输至目标地址。
- 输入字段由 `<input>` 元素定义，其中 `name` 属性决定了键名，而用户的输入则作为对应的值传递给服务器。

如果希望动态生成或修改表单中的某些部分，则可以借助 JavaScript 实现这一点。例如，向现有表单追加新的子节点内容可参见如下代码片段[^3]:

```javascript
var newInput = document.createElement("input");
newInput.type = "text";
newInput.name = "dynamicField";

var formElement = document.querySelector("form");
formElement.appendChild(newInput);
```

对于更复杂的场景比如 Drupal CMS 下的内容管理操作，可能还需要利用其内置的服务接口完成自定义类型的节点添加功能[^2]。而在前端框架领域内也有专门针对组件化开发需求设计好的解决方案可供选用，像基于 iView UI 库实现动态表单渲染就是其中之一[^4]。

最后值得注意的是，在实际项目应用过程中还经常涉及到一些额外配置项如下拉菜单默认选项设定等问题解决办法也已有所提及[^5]。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    
      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    
  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值