首页 > 编程 > HTML > 正文

HTML表单的详细介绍

2020-03-24 19:16:25
字体:
来源:转载
供稿:网友
HTML 表单用于搜集不同类型的用户输入。HTML5 Input,拥有多个新的表单输入类型,提供了更好的输入控制和验证。

表单

编辑

表单是一个包含表单元素的区域。

表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。

表单使用表单标签( form )定义。

form input / /form

Input类型

编辑

HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

1.Input 类型- email

email 类型用于应该包含e-mail 地址的输入域。在提交表单时,会自动验证email 域的值。

2.Input 类型- url

url 类型用于应该包含URL 地址的输入域。在提交表单时,会自动验证url 域的值。

3.Input 类型- number

number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定:

4.Input 类型- range

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

您还能够设定对所接受的数字的限定:

5.Input 类型- Date Pickers(数据检出器)

HTML5 拥有多个可供选取日期和时间的新输入类型:

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

time - 选取时间(小时和分钟)

datetime - 选取时间、日、月、年(UTC 时间)

datetime-local - 选取时间、日、月、年(本地时间)

6.Input 类型- search

search 类型用于搜索域,比如站点搜索或Google 搜索。

search 域显示为常规的文本域。

输入

编辑

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

文本域

当用户要在表单中键入字母、数字等内容时,就会用到文本域(text fields)。

 form First name: input type= text name= firstname / br / Last name: input type= text name= lastname /  /form 

浏览器显示如下:

1.jpg

注意,表单本身并不可见。同时,在大多数浏览器中,文本域的缺省宽度是20个字符。

当用户从若干给定的的选择中选取其一时,就会用到单选框(radio buttons)。

 form  input type= radio name= sex html' target='_blank'>value= male Male input type= radio name= sex value= female Female /form 

浏览器显示如下:

MaleFemale

注意,只能从中选取其一。

如图:

1.jpg

复选框

当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框(checkboxes)。

 form  input type= checkbox name= bike / I have a bike br /  input type= checkbox name= car / I have a car /form 

浏览器显示如下:

I have a bikeI have a car

其他组成

编辑

确认按钮

当用户单击确认按钮(submit)时,表单的内容会被传送到另一个文件。[1]

动作属性

表单的动作属性(action)定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

 form name= input action= html_form_action.asp method= get Username: input type= text name= user  input type= submit value= Submit  /form 

浏览器显示如下:

Username:

如下图:

1.jpg

假如您在上面的文本框内键入几个字母,并且点击确认按钮,那么输入数据会被传送到名为 html_form_action.asp 的页面。那一页将显示出输入的结果。

表单标签

1.png

【相关推荐】

1. HTML免费视频教程

2. 详解form表单的工作过程

3. 详解form标签中的method属性

4. 带你掌握HTML中table和form表单

5. 详解html中form表单的参数和属性

以上就是HTML表单的详细介绍的详细内容,html教程

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表