HTML 表单
2017-04-21 本文已影响0人
WILD_POINTER
HTML 表单用于搜集不同类型的用户输入。
HTML 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等。
<input> 元素是最重要的表单元素。<input> 元素有很多形态，根据不同的 type 属性。
1、文本输入
<input type="text"> 定义用于文本输入的单行输入字段：
<html>
<body>
<form>
First name:<br />
<input type="text" name="firstname"><br />
Last name:<br />
<input type="text" name="lastname">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
2、单选按钮输入
<input type="radio"> 定义单选按钮。
<html>
<body>
<form>
<input type="radio" name="sex" value="male">Male<br />
<input type="radio" name="sex" value="female" checked>Female
</form>
</body>
</html>
3、提交按钮
<input type="submit"> 定义用于向表单处理程序提交表单的按钮。
表单处理程序在表单的 action 属性中指定：
<html>
<body>
<form action="action_page.php">
First name:<br />
<input type="text" name="firstname" value="Mickey"><br />
<input type="text" name="lastname" value="Mouse"><br />
<input type="submit" value="Submit">
</form>
<p>If you click "Submit", the form-data will be sent to a page called "action_page.php".</p>
</body>
</html>
- Action 属性
action 属性定义在提交表单时执行的动作。
通常，表单会被提交到 web 服务器上的网页。
如果省略 action 属性，则 action 会被设置为当前页面。
<form action="action_page.php">
- Method 属性
method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：
<form action="action_page.php" method="GET">
- Name 属性
如果要正确的被提交，每个输入字段必须设置一个 name 属性。
以下实例只会提交 "lastname" 输入字段。
<form action="action_page.php">
First name:<br />
<input type="text" value="Mickey"><br />
Last name:<br />
<input type="text" name="lastname" value="Mouse"><br />
<input type="submit" value="Submit">
</ form>
4、用 <fieldset> 组合表单数据
<fieldset> 元素组合表单中的相关数据。
<legend> 元素为 <fieldset> 元素定义标题。
<html>
<body>
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br />
<input type="text" name="firstname" value="Mickey"><br />
Last name:<br />
<input type="text" name="lastname" value="Mouse"><br />
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
