表 单 / 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="***"/>               提交功能

原文地址:https://www.cnblogs.com/BUBU-Sourire/p/11027329.html