表 单 / HTML

概念理解

一个完整的表单由三部分组成：

表单控件（表单元素）

提示信息

表单域

 

（1）搜索框/网站注册窗口/网站登录窗口

form---表单域

action---数据处理网址/表单提交的网址

method---提交方式（get-方便，传递数据量小，私密性差/post安全性高，传递数据量大，私密性好）

input---表单项，有很多类型（tupe），设置不同的类型（type）可以实现不同功能

text---文本框

textarea---文本域

submit---提交

name---表单项收集到的数据名称

value--表单项的值，显示在文本框中的提示文本

readonly--只读，文本框中的文字只可读，不可更改

size---文本框的宽度

maxlength---最大字符长度

disabled---禁用

 

（2）密码框

<input type="password" name="***">

 

（3）单选按钮

<input type="radio" name="***" value="***">

例：性别：<input type="radio" name="gender" >男

                    <input type="radio" name="gender" >女

Radio如果是一组，必须给给它们相同的name，则可多个选中其中一个

 

注：

*单选按钮要求name对应名称一样

*<lable>标记

针对单选按钮及双选按钮，点击文字亦可选中，提高用户体验度，在选择单选按钮时，避免只有点中按钮才能选中的状态。

为input元素定义标注

作用：用于绑定一个表单元素，当点击label标签的时候，被绑定表单元素就会获得输入焦点（提高用户体验）

<label>用户名：<input type=“text”></label>----当鼠标点击用户名时，输入光标自动在文本框中出现

 

两种写法，配合兼容性问题，二选一：

1.包含所有内容-------<lable><input type="radio" name="gender" value="femal">女</lable>

2.部分包含----- <input type="radio" name="gender" value="femal" id="nv"><lable for="nv">女</lable>

 

（4）多选按钮（复选框）

<input type="checkbox" name="***" value="***">

Checked=checked 默认被选中（必选项）

 

（5）上传文件

<input type="file" name="***" >

 

（6）下拉菜单

<select name="***">

         <option value="***"></option>（选项内容填写）

</select>

 

（7）多行文本

<textarea rows="每行中的字符数" cols="显示的行数" name="***">

文本内容

</textarea>

 

（8）按钮

提交按钮：<input type="submit" value="提交"/>               提交功能

重置按钮：<input type="reset" value="重置"/>          重置内容

普通按钮：<input type="botton" value="普通"/>                没有功能，可以自定义功能

图片按钮：<input type="image" src="***"/>               提交功能