HTML学习11（实践5）：表单

表单是一个包含表单元素的区域，用于搜集不同类型的用户输入。表单是网页获取用户输入数据的一种方式，是网页中提供的一种交互式手段操作，在网站中使用得比较多。比如网上注册一个账号或者我们去银行开户让我们填的表。本节内容讲解 HTML 表单相关内容。

1、表单的工作方式

2、一个简单的表单

这段HTML代码会创建下面显示的表单（如果你想把数据发送到服务器上处理，还需要一些额外的属性）

3、创建表单

<form> 标签用于创建 HTML 表单，常见的表单格式为：

<form name="" method="" action=""></form>

form标签是成对出现的双闭合标签。

• name：定义表单的名字。
• method：定义表单结果从浏览器传送到服务器的方式，默认参数为：get 。post 安全性更高，因此常用作传输密码等，而 get 安全性较低，一般用于查询数据。传送方式属于后端程序员考虑的问题。后端人员会告诉你是以什么方式传输。
• action：发送数据要去的地址。它的值必须是一个有效的 URL，可以是相对 URL 也可以是绝对 URL。如果没有提供此属性或者 action="#"，则数据将被发送到包含表单的页面的 URL。
  
  form标签不但会告诉浏览器当你提交表单时要把表单数据发送到哪里，以及使用什么方式发送，还需要包含表单控件。

4、表单控件

网页中的表单由许多不同的表单元素组成，这些表单元素包括文字字段、单选按钮、复选框、按钮等。

4、1 单行文本框

<input
  type="text"
  name="控件名称"
  value="文字字段的默认取值"
  size="控件的长度"
  maxlength="最长字符数"
/>

type属性决定input标签显示成什么样子。type为text表示单行文本框，该语法包含了许多参数，除了 type 参数以外，其他的参数都是可选的，大家可以自行选择。举个例子：

<form action="" name="formBox" method="post">
	姓名：<input type="text" name="name" size="20"><br>
	年龄：<input type="text" name="age" size="40" value="10" maxlength="3"><br>
</form>

可以尝试给年龄输入值，如果文本字段长度超过了 3，就不能再输入了。

id属性

给标签元素⼀个id命名， 让程序更容易找到它，id是全局唯一的，就像身份证号码一样。

label标签的for属性

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户提高了可用性。
label标签for属性的值应该和input标签中id属性的值一致，这两个表单控件就会被关联起来。如果你在 label 标签内点击文本，就会触发此input控件。就是说，当⽤用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）
使用方式有如下两种：

例如：

4、2 密码输入框

type为password表示密码框，密码输入框是一种特殊的文字字段，他的各个属性和单行文本框是相同的，但是输入进密码输入框的字符全部是“*”表示，保证周围人看不见输入的文本。

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

4、3 单选按钮

type为radio表示单选按钮，单选按钮可以使用户从选择列表中选择一个选项。

<form name="formBox" method="post" action="">
        <input type="radio" name="sex" value="male" checked  id="male" /><label for="male">男</label><br />
        <input type="radio" name="sex" value="female" id="female" /><label for="female">女</label>
 </form>

几个单选按钮可以连接在一起，只需要把它们的 name 值设置为相同的，即成为同一个组。同一组中只有一个按钮可以同时被选。如果没有选中任何一个，那么整个单选按钮池就被认为处于未知状态，且不会随表单提交。 可以尝试如果 name 不相同或者没有 name 会是什么情况。checked表示选中。

4、4 复选框

type为checkbox表示复选框，复选框可以让用户从一个选项列表中选择超出一个的选项。

<form name="formBox" method="post" action="">
		  <input type="checkbox" name="music" id="music" checked /><label for="music">音乐</label><br />
		  <input type="checkbox" name="art" id="art" /><label for="art">美术</label><br />
		  <input type="checkbox" name="math" id="math" /><label for="math">数学</label><br />
</form>

复选框可以拥有自己的名字，并不需要属于一个组。

4、5 选择文件按钮

type为file表示选择文件按钮，定义输入字段和“浏览”按钮，供文件上传。

<input type="file" />

单击“选择文件”按钮，打开如下对话框，进行文件选择。

选择相应的文件，单击打开按钮后，

4、6 按钮

HTML 表单中，有四种按钮：提交按钮，图片提交按钮，重置按钮，匿名按钮。我们可以使用 <button> 元素或者 <input> 元素来创建一个按钮。type 属性的值指定显示什么类型的按钮。

提交按钮（submit）

用于发送表单数据给服务器。数据会发送到表单的 action 属性中指定的页面。

<form name="formBox" method="post" action="">
	  <input type="text" value="输入的内容" />
	  <button type="submit">
	    This a submit button
	  </button>
	  <!--or-->
	  <input type="submit" value="This is a submit button" />
</form>

图片提交按钮（image）

<input type="image" /> 定义图像形式的提交按钮。必须把 src 属性 和 alt 属性 与 结合使用。

<form name="formBox" method="post" action="">
	<input type="image" src="images/submit.gif" alt="Submit" />
</form>

重置按钮（reset）

重置按钮用来清除用户在页面中输入的信息。


在文本框中输入内容，点击按钮即可清除。

匿名按钮（button）

没有自动生效的按钮，但是可以使用 JavaScript 代码进行定制。如果你省略了 type 属性，那么这就是默认值。

<form name="formBox" method="post" action="">
	  <button type="button">
	    This a anonymous button
	  </button>
	  <!--or-->
	  <button>
	    This a anonymous button
	  </button>
	  <!--or-->
	  <input type="button" value="This is a anonymous button" />
</form>

小结

不管使用的是 <button> 元素还是 <input> 元素，按钮的行为都是一样的。它们的不同点在于：

• 从前面的例子中也可以看出 <button> 元素允许你使用 HTML 内容作为其标记内容，但 <input> 元素只接受纯文本内容。
• 使用 <button> 元素，可以有一个不同于按钮标签的值（通过将其设置为 value 属性）。（但是在 IE 8 之前的版本中是不行的）。

4、7 隐藏域

<input type="hidden" /> 定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。

<form name="formBox" method="post" action="">
  <input type="hidden" name="country" value="China" />
</form>

4、8 菜单和列表

菜单和列表主要是用来选择给定答案中的一种，这类选择中往往答案比较多。

下拉菜单

下拉菜单能够节省页面空间，正常状态下显示一个选项，单击展开所有选项。

<form name="formBox" method="post" action="">
	 <select name="select">
	    <option value="成都">成都</option>
	    <option value="广州">广州 </option>
	    <option value="四川">四川</option>
	    <option value="上海">上海</option>
	  </select>
</form>

<option value="四川" selected="">四川</option>

select option标签设置selected即为默认选中，上述代码即设置四川默认选中。

注意：下拉菜单的宽度是由 标记中包含的最长文本的宽度决定的。

列表项

在页面中列表项可以显示出几条信息，一旦超出这个信息量，在列表项右侧会出现滚动条，拖动滚动条可以看到所有选项。

<form name="formBox" method="post" action="">
	<select name="select" size="4" multiple="multiple">
		  <option value="北京">北京</option>
	     <option value="成都">成都</option>
	     <option value="广州">广州 </option>
	     <option value="四川">四川</option>
	     <option value="上海">上海</option>
			<option value="重庆">重庆</option>
			<option value="云南">云南</option>
	</select>
</form>

size="4" 定义一次显示4条数据，multiple="multiple"设置为多选。

4、9 多行文本框

当用户想要填入多行文本时，就应该使用多行文本框而不是单行文本框。多行文本框使用 <textarea> 标记。

<form name="formBox" method="post" action="">
  <label for="contact">留下您的联系方式：</label>
  <textarea name="textarea" cols="35" rows="5" id="contact"></textarea>
</form>

5、挑战——表单综合案例

6、小结

通过select、option定义下拉列表。

<select>
	<option ></option>
</select>

<textarea></textarea>定义多行文本框

7、实践

之前的suggest.html效果如下：

修改成如下：

思考：1、如何禁止多行文本框拖动？
2、观察数据提交方式get和post的区别