- <form>元素定义了表单，所有表单输入元素都嵌套在这个元素中。
- action属性包含服务器脚本的URL。
- method属性包含发送表单数据的方法，可以是POST或GET。
- POST打包表单数据，并把它作为请求的一部分发送到服务器。
- GET打包表单数据，并把数据追加到URL。
- 如果表单数据应当是私有的，或者表单数据很多，如使用了一个<textarea>或者file <input>元素，就应当使用POST。
- 对于可以加书签的请求，要使用GET。
- <input>元素在Web页面上可以作为多种不同的输入控件，这取决于它的“type”属性值。
- type为“text”时会创建一个单行文本输入框。
- type为“submit”时会创建一个提交按钮。
- type为“radio”时会创建一个单选钮。所有同名的单选钮构成一组互斥的按钮。
- type为“checkbox”时会创建一个复选框控件。通过为多个复选框指定相同的名字，可以创建一组选择。
- type为“number”时会创建一个只允许数字字符的单行文本输入控件。
- type为“range”时会创建一个滑动条控件提供数字输入。
- “color”类型会在支持这个类型的浏览器中创建一个颜色选择器（否则只会创建一个普通的文本输入控件）。
- “date”类型会在支持这个类型的浏览器中创建一个日期选择器（否则只会创建一个普通的文本输入控件）。
- “email”、“url”和“tel”类型会创建单行文本输入，在一些移动浏览器上会出现定制键盘来方便数据输入。
- <textarea>元素会创建一个多行文本输入区。
- <select>元素会创建一个菜单，包含一个或多个<option>元素。<option>元素定义了菜单中的菜单项。
- 如果文本放在<textarea>元素的内容中，这会成为Web页面上文本区控件中的默认文本。
- text <input>元素中的value属性可以用来为单行文本输入控件提供一个初始值。
- 在提交按钮上设置value属性可以改变按钮上显示的文本。
- 提交一个Web表单时，表单数据值与相应的数据名匹配，所有名和值会发送到服务器。
- 由于表单有一个表格结构，通常会用CSS表格显示来建立表单布局。CSS还可以用来指定表单的颜色、字体风格、边框等样式。
- HTML允许用<fieldset>元素组织表单元素。
- 可以用<label>元素以一种有助于提高可访问性的方式关联标签与表单元素。
- 使用placeholder属性可以为表单用户提供一个提示，指出你希望在一个输入域中输入什么内容。
- required属性指示一个输入域是必要的，要让表单成功提交，这个输入域中必须有值。有些浏览器在你提交表单之前会强制要求在这些域中输入数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
background:#efe5d0;
margin:20px;
}
form {
display:table;
padding:10px;
border:thin dotted #7e7e7e;
background-color:#e1ceb8;
}
form textarea {
width:500px;
height:200px;
}
div.tableRow {
display:table-row;
}
div.tableRow p {
display:table-cell;
vertical-align:top;
padding:3px;
}
div.tableRow p:first-child {
text-align:right;
}
p.heading {
font-weight:bold;
}
</style>
</head>
<body>
<form action="http://xxx" method="post">
<div class="tableRow">
<p>
Choose your beans:
</p>
<p>
<select name="beans">
<option value="House Blend">House Blend</option>
<option value="Bolivia">Bolivia</option>
<option value="Guatemala">Guatemala</option>
<option value="Kenya">Kenya</option>
</select>
</p>
</div>
<div class="tableRow">
<p>Type:</p>
<p>
<input type="radio" name="beantype" value="whole"> Whole bean<br>
<input type="radio" name="beantype" value="ground" checked> Ground
</p>
</div>
<div class="tableRow">
<p>Number of bags:</p>
<p><input type="number" name="bags" min="1" max="10"></p>
</div>
<div class="tableRow label">
<p>Must arrive by date:</p>
<p><input type="date" name="date"></p>
</div>
<div class="tableRow">
<p>Extras:</p>
<p>
<input type="checkbox" name="extras[]" value="giftwrap">Gif wrap<br>
<input type="checkbox" name="extras[]" value="catalog" checked>
Include catalog with order
</p>
</div>
<div class="tableRow">
<p class="heading">Ship to</p>
<p></p>
</div>
<div class="tableRow">
<p>Name:</p>
<p><input type="text" name="name" value=""></p>
</div>
<div class="tableRow">
<p>Address:</p>
<p><input type="text" name="address" value=""></p>
</div>
<div class="tableRow">
<p>State:</p>
<p><input type="text" name="state" value=""></p>
</div>
<div class="tableRow">
<p>Zip:</p>
<p><input type="text" name="zip" value=""></p>
</div>
<div class="tableRow">
<p>Phone:</p>
<p><input type="text" name="phone" value=""></p>
</div>
<div class="tableRow">
<p>Customer Comments:</p>
<p>
<textarea name="comments" rows="10" cols="48"></textarea>
</p>
</div>
<div class="tableRow">
<p></p>
<p><input type="submit" value="Order Now"></p>
</div>
</form>
</body>
</html>
浙公网安备 33010602011771号