该html页面包含表单元素代码,html网页的表单元素介绍

一、表单的结构

1、必须有表单的标签

，把所有可以输入信息的控件包含在表单的标签里面。

2、要有用户能够输入或者选择信息的控件。

3、必须有一个提交按钮，把数据发送到服务器端，或返回用户结果，或存放在数据库中。

比如一个最简单的搜索表单的结构如下：

首先认识form表单，method代表发送数据的方式，默认是post，还有一种是get，如果是get，表单的数据会显示在地址栏上，成为查询字符串，很不安全。action是表单处理页面，也就是连接数据库，查询关键字，返回用户结果的处理页面，一般是动态程序，比如php，asp.net，asp，jsp等页面。

input是表单的一种控件，可以让用户输入或者选择数据。最核心的是type属性，确定该控件是什么类型的控件，比如是单行文本、单选、多选还是密码等类型。placeholder是html5新增的属性，表示提示信息，required是一种布尔值属性，表示该控件不能为空。

一个表单必须对应一个提交按钮，也就是type="submit"的按钮。这种按钮才具备提交数据，发送数据的能力。按钮还有两种类型，一种是button，一般和javascript结合，完成交互行为，还有一种是reset，重置表单为初始状态，貌似很无用。

type=""这里的type类型里面的值是固定的，比如text表示单行文本，password表示密码类型，radio表示单选按钮，这种值是不能随便乱写的。

而input的id和name表示控件的名字，是可以自己命名的，按照命名规则命就可以了。

控件一般对应到一个label标签，它的目的是当点击label标签的文字时，光标可以放入对应的控件中，可以提高用户体验。比如：

如果是用户输入信息的控件，可以不要value属性，但是如果是选择性控件，则要加上value属性，因为传递给服务器的值是value对应的值，而不是你看见的文字。比如：

性别：

男

女

二、控件类型

表单常用控件主要有三种：input(输入)、select(下拉)、textarea(多行文本)，只有input具有很多的type类型。

这里罗列出常用的type类型：

type="text" /*单行文本*/

type="password" /*密码类型*/

type="email" /*邮件类型*/

type="url" /*网址类型*/

type="range" /*范围*/

type="date" /*利用万年历选择日期*/

type="time" /*时间*/

type="week" /*周数和日期*/

type="datetime-local" /*本地日期时间*/

type="number" /*数量*/

type="color" /*颜色*/

type="radio" /*单选*/

type="checkbox" /*复选*/

type="file" /*文件域，选择本地文件*/

type="image" /*图像域，可以用一张图片代替提交按钮*/

其次，select表示下拉菜单，比如：

四川

北京

上海

深圳

select必须和option组合在一起，option代表的是下拉菜单的选项。

最后，是多行文本，比如用来简单评论的多行文本框。

简介：