前端基础（3）：html语法（2）： <form> 标签

本文介绍了HTML表单的基础知识，包括<form>标签的基本用法及其属性，如action、method等，并通过实例展示了如何创建简单的用户输入表单。

日期：2017/11/3

今早学习一下html标签之一--表单 <form> 标签的使用：

例子1：

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

结果1：

<form> 定义和用法

<form> 标签用于为用户输入创建 HTML 表单：1. 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等；2. 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素；3. 表单用于向服务器传输数据。ps：form 元素是块级元素，其前后会产生折行。

Form 对象属性

例子2：

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<form action=http://localhost/my/Hello method=get>
	<input type=text name=test>
	<input type=submit value="提交">
	<input type=text name=test>
	<input type=submit value="Submit">
</form>
<form action=http://localhost/my/aaaa method=get>
	<input type=text name=test>
	<input type=submit value="提交">
	<input type=text name=test>
	<input type=submit value="Submit">
</form>

结果2：

从例子2可以看出有action属性，下面为<form>标签的属性列表：

属性	描述
acceptCharset	服务器可接受的字符集。
action	设置或返回表单的 action 属性。
enctype	设置或返回表单用来编码内容的 MIME 类型。
id	设置或返回表单的 id。
length	返回表单中的元素数目。
method	设置或返回将数据发送到服务器的 HTTP 方法。
name	设置或返回表单的名称。
target	设置或返回表单提交结果的 Frame 或 Window 名。

action=http://localhost/my/aaaa method=get，指的是输入（http://localhost/my/aaaa）到浏览器的url栏，使用HTTP协议的 get 请求方法。

二、form标签的action属性也有很大讲究

比如，我在一个jsp文件添加了：

	<form action="${pageContext.request.contextPath}/a/list" method="post">
		用户名称name：<input type="text" name="userName" value=""/>
		<input type="submit" name="查询check"/>
	</form>

里面的 action="${pageContext.request.contextPath}/a/list"，就是采用了URL的绝对路径。