HTML入门教程 - 11.关于表单(Forms)

表单时用来获取用户输入的数据。表单可以用来作为网上应用程序的接口。比如,可以在网页上发送数据。

单独的表单常常不是非常的有用。表单常常结合着其他的编程语言来处理用户输入的信息。其他的编程语言使用一些代码采取各种外观和程序来传送到这个网站上。

FORM元素

在HTML中基本的标签显示如下：

form - 表单是用来给用户提交信息

action - 告诉表单内容将发送到哪里

method - 告诉表单数据是如何发送的 他同时可以拥有“get”默认特性,在网络地址上显示这个表单信息。如果用“post”的话，他将无形的发送信息。

注意：get是用来为短块的非敏感的信息所使用-你可能看见你在网上提交的信息出现在网络地址中显示为搜索的结果。

post常常应用在长条代码中，作为更加安全的信息提交方式，比如说contact form.

form元素示例代码显示如下：

<form action="bestsg-submit.php" method="post">

</form>

INPUT元素

input标签是form中最为常见的标签。他可以有不同或多种样式，最常见的显示在下方：

 - <input type="text"> 或者直接<input>。这样你将获得一个标准的文本框。他同样可以在这个里面增加value特性，比如说在文本框中加入初始文字。

- <input type="password">这个将会和文本框非常的类似，但是你所输入的文字将会被隐藏起来。

- <input type="checkbox">这个将显示为一个复选框,用户可以进行切换开关。这个同样荣有一个checked的特性(<input type="checkbox" checked>)这个特性不需要一个value值，这个将设置复选框初始的状态为开启。

- <input type="radio">这个也和复选框非常类似，但是用户在一个组群里只能选择一个单选框。这个同样拥有checked的特性。

- <input type="submit">是一个来提交表单的按钮。你可以控制出现在按钮上的文字使用value特性 比如<input type="submit" value="HAHA">.

注意：和<br><img>一样，<input>标签没有包含任何内容，所以不需要一个闭合标签。

TEXTAREA多行文本输入区

textarea基本上是一个大型的多行的文本框，虽然你可以用CSS来操纵你文本框的内容，但是你同样可以定义期望的行数目和列数目为rows和cols特性。

示例如下：

<textarea rows="5" cols="20">A big load of text</textarea>

你放在textarea开始于闭合标签中的文字将显示为文本框的初始文字。

SELECT标签

select标签和option标签一起运用可以显示为下拉列表，示例代码如下显示：

<select>
<option>Option 1</option>
<option>Option 2</option>
<option value="third option">Option 3</option>
</select>

当你选择下拉列表的时候，所选项目的值将会发送。这个值将会是你所选在<option>和</option>之间的值。

除非你有特定的值定义在option中，那么将会发送特定的值。

比如说如上的代码中，如果Option 1 被选中，那么发送的是Option 1.如果Option 3被选中，发送的就是third option。

和上面的单选框和复选框一样，option标签同样也有一个selected 特性来设定初始没选择的项。

示例代码：

<option selected>Rodent</option>

NAME标签

上面介绍的内容好像表现的非常的不错，但是如果你介绍你的表单给一个处理表单的代码，上面的内容将会全部忽略。这是因为全部的表单需要“name”属性，

示例代码：

<input type="text" name="bestsg">

加入name的示例代码：

<form action="bestsg.php" method="post">

<p>Name:</p>
<p><input type="text" name="name" value="Your name"></p>

<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>

<p>Are you:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite"> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual"> Asexual</p>

<p><input type="submit"></p>

</form>