售前咨询 售后咨询
当前位置: 上海网站设计 > 建站知识 > 建站教程

学习HTML方法详解五:常用标签之表单标签

网站编辑:小润 | 发表时间:2019-02-02 20:24:53

 HTML 表单用于搜集不同类型的用户输入。

       表单标签列表:

       一表单标签<form>

       表单是一个包含表单元素的区域。表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。表单使用表单标签(<form>)定义。

       二表单输入标签<input>

       多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

       (1)文本域(Text Fields)和密码域(Password Field)

       当用户要在表单中键入字母、数字等内容时,就会用到文本域和密码域。

[html] view plaincopyprint?

1.<span style="font-size:18px;"><html>  

2.      <head>  

3.      <title>HTML表单标签演示</title>  

4.      </head>  

5.      <body>  

6.            <form>  

7.            登录名称:<input type="text" name="user" /><br />  

8.            登录密码:<input type="password" name="password" />  

9.            </form>  

10.            <p>请注意,当您在密码域中键入字符时,浏览器将使用项目符号来代替这些字  

11.  

12.符。</p>  

13.      </body>  

14.</html>  

15.</span>  

       浏览器显示的结果为:

       (2)单选按钮(Radio Buttons)

       当用户从若干给定的的选择中选取其一时,就会用到单选框。注意,只能从中选取其一。也可以用属性checked="checked"将性别选择为默认状态。

[html] view plaincopyprint?

1.<span style="font-size:18px;"><html>  

2.      <head>  

3.      <title>HTML表单标签演示</title>  

4.      </head>  

5.      <body>  

6.            <form>  

7.            选择性别第一种情况:<input type="radio" name="sex" value="man" />男      

8.  

9.                                <input type="radio" name="sex" value="woman" />女    

10.  

11.            <hr/>  

12.            选择性别第二种情况:<input type="radio" name="sex" value="man" />男      

13.  

14.                                <input type="radio" name="sex" value="woman"   

15.  

16.checked="checked" />女   

17.            </form>  

18.            <p>第一种情况最为常见,但是也会遇到第二种情况,就是当注册的为女性网站  

19.  

20.时,性别选项会默认选择性别女。</p>  

21.      </body>  

22.</html></span>  

       浏览器显示的结果为:

       (3)复选框(Checkboxes)

       当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。也可以用属性checked="checked"将性别选择为默认状态。

[html] view plaincopyprint?

1.<span style="font-size:18px;"><html>  

2.      <head>  

3.      <title>HTML表单标签演示</title>  

4.      </head>  

5.      <body>  

6.            <form>  

7.            选择技术:<input type="checkbox" name="technology" value="JAVA" />JAVA  

8.              <input type="checkbox" name="technology" value="HTML" />HTML  

9.              <input type="checkbox" name="technology" value="CSS" />CSS   

10.            </form>  

11.      </body>  

12.</html></span>  

         浏览器显示的结果为:

         (4)输入标签中的其他输入类型

         1文件选择框(file)

         当用户需要从给定的文件夹中选取一个或若干个文件时,就会用到文件选择框。

         2表单隐藏组件(hidden)

         当用户数据不需要客户端知道,但是可以将其提交给服务端。

         3图片

         这个图片组件可以有提交数据的功能。

         4按钮

         这个按钮组件可以自定义点击事件。

关键字:
官方微信
上海市长宁区宣化路300号华宁国际广场中区7层
+021-8031 0607
+135 8590 1130