HTML 表单form

表单标签

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

表单元素是允许用户在表单中输入内容。比如：文本域（testarea）、下拉列表、单选框、复选框等。

作用：表单是为了收集各种（如：用户）的信息。比如用户的登录和注册。

表单的组成：表单域、表单元素、提示信息。

表单域

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

在HTML标签中，<form>标签用于定义表单域，实现用户信息的收集和传递；<form>会把它范围内的表单元素信息提交到服务器。

语法：

<form action="#url" method="POST" name="login">
    input element
    ...
<form>

属性:

属性	属性值	说明
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get、post	用于设置表单数据的提交方式
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

 

　　　

 

 

 

表单元素

<input>：输入表单元素，收集用户的信息

语法：

<input type="属性值" />

input标签中的属性：

属性	属性值	说明
type	如下：type属性值	type的值不同，输入的内容就不同，如：type属性值
name	如：name=“pwd”	定义input元素的名字
value	如：value="123456"	规定input元素的值
checkd	如：checked=“checked”	规定input元素加载时被选中
maxlength	如：maxlength=“正整数”	规定输入字段的字符最大长度

 

 

　　

 

　　

 

 

  　注意：单选和复选按钮必须有一个name=“相同值”

　　type：的属性值

属性值	描述
text	用户可以输入任何文本
password	用户可以输入看不见的文本
radio	定义单选按钮，实现多选一
checkbox	定义复选框，实现多选多、一选一
submit	提交按钮，把表单数据发送到服务器
reset	重置按钮，清除表单中的所有数据
button	定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
image	定义图片形式的提交按钮
file	定义输入字段和“浏览”按钮，上传文件
hidden	定义隐藏的输入字段

 

　　　　

 

 

 

 

 

 

 

 

 

 

 

提示信息 

 <lable>标签：

　　<lable>标签input元素定义标注（标签）

　　<lable>标签用于绑定一个表单元素，当点击<lable>标签内的文本时，

　　浏览器就会自定将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

　　语法：

<lable for="name">username: </lable> <input type="text" name="username " id="name">

　　说明：<lable>标签的for属性与元素中的id属性相同

<select>表单元素：

　　应用场景：

　　语法：

<select>
    <option>option1</option>
    <option selected="selected">option2</option>
    ...
</select>

　　说明：

　　1. 在<option>标签中selected="selected"表示默认选中

testarea文本域表单元素

　　使用场景：

　　　　当用户输入内容较多时，使用<textarea>标签

　　语法：

<textarea name="" id="" cols="30" rows="10"></textarea>

表单案例：

1. 注册案例

<table>
<tr>
    <td>sex:</td>
    <td>
        <input type="radio" name="sex">
        <input type="radio" name="sex">
    </td>
</tr>
</table>