HTML学习笔记（九）表单
来源：互联网 发布：淘宝军工 编辑：程序博客网 时间：2024/05/18 01:34
表单<form>
表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息，并用于向服务器传输数据的元素。
表单标签：
表单组件标签：
文本框 <input type="text"/>
密码框 <input type="password"/>
单选按钮 <input type="radio"/>
多选框 <input type="checkbox"/>
下拉列表框
<select> 描述一个下拉框
<option></option> 描述一个下拉项
<option></option>
</select>
多行文本框
<textarea cols="..." rows="..." ></textarea>
提交按钮 <input type="submit" value="按钮上的字"/>
重置按钮 <input type="reset" value=" ......"/> 把表单组件恢复为默认状态。
普通按钮 <input type="button" value=" ...... "/>
HTML 表单 - 输入标签<input>
输入类型是由类型属性（type）定义的。经常被用到的输入类型如下：
文本域：type="text"密码字段：type="password" (密码字段字符不会明文显示，而是以星号或圆点替代。)
单选按钮：type="radio" （设置相同的name属性，把单选按钮规定为同一组，就实现单选。 如：下面单选框小栗子中两个radio类型input的name都为“Sex”）
复选框：type="checkbox" (用户可从若干给定的选择中选取一个或若干选项)
提交按钮：type="submit" （submit：把整张表单收集的数据提交给服务器）
重置按钮：type="reset" （把表单组件恢复为默认状态。） ----提交与重置必须在一个from表单标签里。
表单的动作属性：
action="xxxxxx.xxx" 当用户单击提交按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名/目标地址。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
小栗子：（引用自w3cschool）
<form name="input"action="xxx.html" method="get">Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form>
浏览器显示如下：
（文本框默认值直接在value属性里面添加即可。）
<form name="input" >
type：当type值设置为submit时，按钮才有提交作用。
(注意：只有含有name属性的表单组件，才可以在点击提交按钮时传递参数（name属性值作为参数名称）)
value：按钮上显示的文字假如在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "xxx.html" 的页面。该页面将显示出输入的结果。
详细请参照--点击到w3cschool--表单
单选框小栗子：
<html> <body> <form> 女： <input type="radio" checked="checked" name="Sex" value="f"/> <br/> 男： <input type="radio" name="Sex" value="m"/> </form> </body></html>(提交的时候，提交的参数的参数名是name属性值，参数值是value属性值)
(单选按钮的默认选中：在input里添加checked="checked")
复选框小栗子：
<html> <body> <form> 爱好： <pre> <input type="checkbox"name="reading book" value="reading book"/>看书</pre> <pre> <input type="checkbox"name="singing" value="singing"/>唱歌</pre> </form> </body></html>使用了 pre 标签对空行和空格进行控制。还可以使用<span>   </span>
(复选框的默认选中：在input里添加checked="checked")
下拉列表小栗子：
<html> <body> <form> <select name="city"> <option value="Beijing">Beijing</option> <option value="Shanghai" selected="selected">Shanghai</option> <option value="Hongkong">Hongkong</option> <option value="Lundon">Lundon</option> </select> </form> </body></html>通过在某个option标签内添加selected="selected"属性，可以设定默认选项值。不设置默认第一个
下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，就可以实现多选功能。
(传的参数就是value的值)
文本域小栗子：
<html> <body> <textarea rows="8" cols="16"></textarea> </body></html>
cols ：多行输入域的列数。
rows ：多行输入域的行数。
<label>使用小栗子：
<!DOCTYPE HTML> <html> <body> <form> <label for="Username">用户名</label> <input type="text" id="Username" name="username" /> <label for="Password">密码</label> <input type="password" id="Password" name="password"/> <br /> <label for="Male">男</label> <input type="radio" name="sex" id="Male" /> <br /> <label for="Female">女</label> <input type="radio" name="sex" id="Female" /> </form> </body> </html>
说明：
<label> 标签为 input 元素定义标记。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性：如果在 label 元素内点击文本，就会触发此控件。即：当用户点击“用户名” “密码” 或者“男” “女” 文字时，浏览器就会自动将焦点转到相关要填写内容的表单框上。不一定非得点击输入框，或选项控件。
"for" 属性可把 label 绑定到另外一个元素。<label> 标签的 for 属性应当与相关元素的 id 属性相同。<fieldset>与<legend>的使用小栗子：
<!DOCTYPE HTML><html> <body> <form> <fieldset> <legend align="center">健康信息</legend> 姓名：<input type="text" /> 性别：<input type="text" /> <br/> 身高：<input type="text" /> 体重：<input type="text" /> </fieldset> </form> </body></html>
<optgroup>使用小栗子：（把相关的选项组合在一起）
<!DOCTYPE HTML> <html> <body> <form> <select> <optgroup label="英系车"> <option value ="Bentley">宾利</option> <option value ="LOTUS">路特斯</option> </optgroup> <optgroup label="德系车"> <option value ="Benz">奔驰</option> <option value ="Audi">奥迪</option> </optgroup> </select> </form> </body> </html>其中，label作用是为选项组规定描述，是必要的属性。
0 0
- HTML学习笔记（九）表单
- HTML学习笔记（九）HTML 表格
- Sencha Touch学习笔记（九）表单
- HTML学习笔记九
- html表单学习笔记
- HTML学习笔记-表单
- Html学习笔记（4）表单/多媒体
- HTML学习笔记-form表单（五）
- HTML学习笔记（五）--表单
- [php学习九]html的表单练习
- HTML学习笔记B九
- HTML+CSS学习笔记 (九)
- HTML学习笔记（十三）HTML 表单和输入
- HTML学习笔记：表单标记
- HTML学习笔记--表单标记
- HTML学习笔记----表单标签
- html表单---学习笔记03
- Html学习笔记6：表单
- 第五周 编程题
- Android最佳性能实践(一)——合理管理内存
- 深入理解Android的startservice和bindservice
- 如何将PDF转换成PPT文件格式
- spring 模式
- HTML学习笔记（九）表单
- 100个提交事务的LR脚步
- Bugtags 使用说明
- 关于“未能加载文件或程序集”的解决方法
- Tcl -- lsearch
- web.xml与listener
- Android最佳性能实践(二)——分析内存的使用情况
- 多线程编程之生产者消费者
- 贪心算法 problem f（1006)
