HTML常用表单总结

表单的概念：表单是用来采集用户的输入数据，然后将数据提交给服务器

一个表单有三个基本组成部分：

• 表单标签：这里面包含了处理表单数据所用程序的URL以及数据提交到服务器的方法。
• 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
• 表单按钮：包括提交按钮、复位按钮和一般按钮；

表单基本框架

<form action="" method="">
	<input type="" name="" id="" value="" />
</form>

表单标签<form></form>

功能：用来定义数据采集的范围，也就是<form>和</form>里面包含的数据将被提交到服务器

语法：

<form action="" method=""></form>

action="" 服务器地址，数据提交的地址

method="" 属性包括get/post 输入的属性get 会在地址栏显示 post 在地址栏看不到

表单域对象<input></input>

• 文本框

文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。

<input type="text" name="" id="" value="" />

type 用来定义输入类型

value 用来定义初始值

• 密码框

是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。

<input type="password" name="" id="" value="" placeholder="密码" maxlength="8"/>

placeholder 输入框里的提醒文本，当输入文字时会自动消失

maxlength 用来定义输入框的最大字符限制

 

• 隐藏域

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。

<input type="hidden" name="" id="" value="" />

• 多行文本框

是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。

<textarea rows="" cols=""></textarea>

• 复选框

复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。

<input type="checkbox" name="" id="" value="" />

• 单选框

访问者只能在选择中选取其中一种

<input type="radio" name="" id="" value="" />

name 值相同时候的才能每次选中一个

• 下拉选择框

<select>
	<option value =""></option>
</select>

value 属性是可供选择的内容

• 文件上传框

有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。

<input type="file" name="" id="" value="" />

表单按钮

表单按钮控制表单的运作

• 提交按钮

提交按钮用来将输入的信息提交到服务器。

<input type="submit" name="" id="" value="" />

• 复位按钮

复位按钮用来重置表单

<input type="reset" name="" id="" value="" />

• 一般按钮

一般按钮用来控制其他定义了处理脚本的处理工作。

<input type="button" name="" id="" value="" />