HTML表单

在html文档中，表单通常用于登陆注册页面。

常见的表单主要包括文本框、单选按钮、复选框、按钮等表单。

form标签

它是用来创建一个表单，定义一个表单的开始和结束。

 

<form name="表单名"method="传送方式"action="表单处理">

 

Action 属性：指定提交的地址

Method属性：指定提交的方式。Get   post

Get和post的方式的区别

get：使用这个设置时，表单数据会附加到URL之后，由用户端直接发送到服务器，所以速度比post快，但缺点是数据长度不能太长。在没有指定method的情形下，一般会视

get为默认值。

post：使用这个设置时，表单数据是作为一个数据块与URL分开发送的，所以通常没有数据长度上的限制，缺点是速度会比get慢。

文本框

<input id="userid"type="text" maxlength="10" size="19"value="abc">

 

Maxlength 属性指定文本框能接受的最大字符个数

Size属性 指定文本框的大小

Vlue 属性指定默认初始值

密码框

<input type="password"maxlength="6">

 

密码框和文本框是一样的，文本框的属性也适用于密码框，唯一不同的是密码框是以掩码的形式显示内容，保证安全性。

Lable

<lable>的作用

（1）       可单独对其应用相应的样式

（2）       For属性可以使之和某个<input>关联，即当单机文本会激活对应的<input>。

<lable for="userid">账号：</lable>

<input id="userid"type="text" maxlength="10" size="19"value="abc"><br/>

 

单选按钮

<input type="radio"name="role"/>学生

<input type="radio"name="role" checked/>教师

<input type="radio"name="role"/>管理员

 

如果需要将若干个单选按钮变为一组（一组最多只有一个被选中）需要设置相同的name属性

如果需要默认选中某个选项，需加上checked属性

标签属性的表现形式

（1）       键值对：属性名=属性值

type=“text” maxlength=“6”

（2）       一些取值为布尔类型的属性直接使用属性名

Checked readonly

多选按钮

<input type="checkbox"name="hobby" value="1">运动

<input type="checkbox"name="hobby" value="2">音乐

<input type="checkbox"name="hobby" value="3">打游戏

<input type="checkbox"name="hobby" value="4">看电影

<input type="checkbox"name="hobby" value="5">玩桌游

<input type="checkbox"name="hobby" value="6">吃美食

 

提交按钮

<input type="submit"value="登陆"/>

 

点击按钮之后跳转到form表单指定的     action

value属性 value上的值对应的就是显示按钮上面的文字

点击按钮将form表单中的input中name属性值（键）和用户输入的值组成键值对（或input标签value属性对应烦的值）。并拼接到form表单action属性值的后面。

 

 

重置按钮

<input type="reset" />

（1）       点击按钮，重置表单内部的输入框（单选按钮）

（2）       value属性：value对应的键就是按键上显示的文字

普通按钮

<input type=”button”value=”校验”>

（1）       点击按钮，没有任何的反应。

（2）       需要设置src属性的值，如果src对应的路径没有找到图片，并且有设置alt属性，按钮显示默认值“提交”，若果设置了alt属性则显示alt的值。（类似img标签）

 

图片按钮

 

<input type="image"src="华点.png"alt="登陆"/>

（1）       作用和submit按钮是一样的

（2）       需要设置src属性的值，如果src对应的路径没有知道图片，并且没有设置alt属性，按钮显示默认值“提交”，如果设置了alt属性则显示alt的值。（类似img标签）

<button>标签

（1）       内容可以是任意资源（图片，段落，音频）

（2）       当button标签放置在form内部，作用和submit一样。