(12)html表单<form>之一

本文详细介绍了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>` 元素创建一个表单节点。`<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、付费专栏及课程。

余额充值