HTML form 标签

1、定义和用法

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menustextareafieldsetlegend 和 label 元素

表单用于向服务器传输数据。

2、提示和注释

注释:form 元素是块级元素,其前后会产生折行。

3、TIY 实例

文本域(Text fields)

本例演示如何在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>

运行结果:

 

文本域(Textarea)

本例演示如何创建一个文本域(多行文本输入控制)。用户可以在文本域中写入文本。在文本域中,可写入的字符字数不受限制。

<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>

运行结果:

 

围绕数据的Fieldset

本例演示如何在数据周围绘制一个带标题的框。

<!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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值