HTML表单元素学习
- 整理时间：2017-9-30 作者邮箱：info#haixia.net （将#换成@，来信必复）
- 表单的组成部分：
1、表单体<form> + 表单域<input> + 表单按钮<button>
<form action="" method="get"> <!--action是表单提交地址，不写代表自己本身，method是方法post和get，常用是post-->
<form action="" method="get" name="form1" target="_blank"> <!--name 是表单名称，target="_blank"是新窗口打开-->
<input type="text" name="name" id="" value="123" size="15" maxlength="15" readonly>
<!--
type 是类型，text是单行文本，radio是单选按钮，select下拉框等
name 是名称
id
value是默认值
size是输入框的宽度，默认是20个字符
maxlength是最大可以输入的字符数
readonly是只读
还有一个属性是disabled禁用，禁用后不会提交此数据-->
| 序号 |
属性名称 |
描述 |
| 1 |
text |
单行文本框，默认20个字符 |
| 2 |
password |
密码框，与text类型相似，区别是字符非明文，以*号代替 |
| 3 |
radio |
单选按钮，name值必须相同，checked为默认值，每个里面都要设置自己的value值 |
| 4 |
checkbox |
复选框，name值必须相同，返回数组，checked为默认值 |
| 5 |
button |
自定义按钮，多于JavaScript配合使用 |
| 6 |
submit |
提交按钮，向服务器发送数据，value是按钮上的文字 |
| 7 |
reset |
重置按钮，将当前表单所有控件中的值恢复到默认值 |
| 8 |
file |
文件上传按钮，multple允许批量上传，与multipart/form-data配对 |
| 9 |
image |
设置图像为提交按钮，必须放在<form>中，src为源，alt为说明 |
| 10 |
hidden |
通常用于向服务器传送预值或者由JavaScript来处理 |
<input type="text" name="login" value="默认值">
<input type="password" name="pwd">
- 3、单选按钮（多个name必须相同，checked用于设置默认选项）
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
- 4、复选框（多个name必须相同，checked用于设置默认选项）
<input type="checkbox" name="language" value="php" checked>php
<input type="checkbox" name="language" value="java">java
- 5、自定义按钮（配合JavaScript脚本使用）
<input type="button" value="点击">
<input type="submit" value="提交">
<input type="reset" value="重置">
- 8、文件上传 (multiple允许多个文件同时选择上传)
<form name="form1" action="fun.php" method="post" enctype="multipart/form-data">
<input type="file" name="files" multiple>
</form>
<input type="image" src="图片文件地址" alt="说明">
<input type="hidden" name="country" value="china">
<label>表单元素描述标签(用户点击label里面字[下例的姓名]的时候可以激活焦点)
<label>标签用于对控制内容进行说明，如用户名、密码等- 格式一（优点：label与input同级,适合表格布局。缺点：input必须要有id属性与label的for属性关联）
<label for="name">用户名：</label>
<input type="text" name="name1" id="name">
- 格式二（优点：代码更紧凑，适合div布局。缺点：label和input是父标签，增加了层级）
<label>用户名：<input type="text" name="name1"></label>
下拉框和分组（参考下面的学习代码）
<select> <option> value selectd 和 <select> <optgroup label="分组"><option> value selectd
学习代码
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" target="_blank">
<label>姓名：<input type="text" name="name" value="请输入姓名"></label>
<label>密码：<input type="password" name="pwd"></label>
性别：<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女<br>
爱好：<input type="checkbox" name="like" value="music">唱歌
<input type="checkbox" name="like" value="wu" checked>跳舞
<input type="checkbox" name="like" value="run" checked>跑步<br>
请选择：<select name="city">
<option value="yt">烟台</option>
<option value="qd">青岛</option>
<option value="wf">潍坊</option>
<option value="jn">济南</option>
<option value="jining">济宁</option>
</select>
分组选择：<select name="" id="">
<optgroup label="烟台市">
<option value="zf">芝罘区</option>
<option value="ls">莱山区</option>
<option value="kf" selected>开发区</option>
</optgroup>
<optgroup label="威海市">
<option value="rc">荣成市</option>
<option value="hc">环翠区</option>
<option value="gq">高区</option>
</optgroup>
</select>
<input type="file" name="files" multiple><br>
<input type="submit" value="提交">
<input type="button" value="点击">
<input type="image" src="1.jpg" width="50">
<input type="reset" value="重置">
</form>
</body>
</html>
文本域<textarea>
<textarea name="massage" cols="30" rows="10" style="resize:both;"></textarea>
属性：
1、cols：每行最多多少个字符
2、rows：可以显示多少行
3、resize:是否允许更改尺寸 默认：both允许；none不允许调整尺寸；horizontal仅允许水平调整宽度；vertical：仅允许垂直调整高度
表单分组标签<fieldset>
<fieldset>
<legend>基本信息</legend>
<div>
<label for="name">用户名称：</label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="pwd">密码：</label>
<input type="password" name="pwd" id="pwd">
</div>
<div>
<label for="email">电子邮箱：</label>
<input type="text" name="email" id="email">
</div>
浙公网安备 33010602011771号