1、定义和用法
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
2、提示和注释
注释:form 元素是块级元素,其前后会产生折行。
3、TIY 实例
本例演示如何在HTML页面创建文本域。用户可以在文本域写入文本。
<html>
<body>
<form>
名:
<input type="text" name="firstname">
<br />
姓:
<input type="text" name="lastname">
</form>
</body>
</html>
运行结果:
本例演示如何创建HTML的密码域。
<html>
<body>
<form>
用户:
<input type="text" name="user">
<br />
密码:
<input type="password" name="password">
</form>
<p>
请注意,当您在密码域中键入字符时,浏览器将使用项目符号来代替这些字符。
</p>
</body>
</html>
运行结果:
本例演示如何在HTML页中创建文本框。用户可以选中或取消选取复选框。
<html>
<body>
<form>
我喜欢自行车:
<input type="checkbox" name="Bike">
<br />
我喜欢汽车:
<input type="checkbox" name="Car">
</form>
</body>
</html>
运行结果:
本例演示如何在HTML中创建单选按钮。
<html>
<body>
<form>
男性:
<input type="radio" checked="checked" name="Sex" value="male" />
<br /> //属性checked表示该单选框被选择,初始化
女性:
<input type="radio" name="Sex" value="female" />
</form>
<p>当用户点击一个单选按钮时,该按钮会变为选中状态,其他所有按钮会变为非选中状态。</p>
</body>
</html>
运行结果:
总结:input标签中type属性决定了输入框的形式,以上有,type:text(文本框),passworld(输入密码框),checkbox(复选框),radio(单选框)。
本例演示如何在HTML页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
<html>
<body>
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
运行结果:
本例演示如何创建一个文本域(多行文本输入控制)。用户可以在文本域中写入文本。在文本域中,可写入的字符字数不受限制。
<html>
<body>
<p>
This example cannot be edited
because our editor uses a textarea
for input,
and your browser does not allow
a textarea inside a textarea.
</p>
<textarea rows="3" cols="30">
The cat was playing in the garden.
The cat was playing in the garden.
The cat was playing in the garden.
The cat was playing in the garden.
The cat was playing in the garden.
</textarea>
</body>
</html>
运行结果:
本例演示如何创建按钮。你可以对按钮上的文字进行自定义。
<html>
<body>
<form>
<input type="button" value="Hello world!">
</form>
</body>
</html>
运行结果:
本例演示如何在数据周围绘制一个带标题的框。
<!DOCTYPE HTML>
<html>
<body>
<form>
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
</form>
<p>如果表单周围没有边框,说明您的浏览器太老了。</p>
</body>
</html>
运行结果:
本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您点击提交,表单数据会被发送到名为 demo_form.asp 的页面。</p>
</body>
</html>
运行结果:
此篇文章参考自w3school下的HTML标签form标签,网址为:http://www.w3school.com.cn/tags/tag_form.asp