表单的组成: 表单域 表单元素 提示信息
表单域:
<form action="url" method="提交方式" name="表单域名称">
各种元素控件
<form/>
| 属性 | 属性值 | 作用 |
| action | url地址 | 用于指定接收处理表单数据的服务器程序的URL地址 |
| method | get/post | 用于设置表单数据的提交方式,其取值为get或post |
| name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域 |
表单元素:
①.inputl:输入表单元素
②.select:下拉表单元素
③.texearea:文本域元素
1.input:输入表单元素 → <input type="属性值"/>
type的属性值不同表示的控件类型不同
<!-- text 文本框 -->
<!-- maxlength 最大输入字符-->
<!-- input 输入表单元素 type 类型 -->
<label for="text">用户名:</label>
<input type="text" id="text" name="usename" value="请输入" maxlength="6"><br />
<!-- password 密码框 -->
密码:<input type="password" name="password"><br />
<!-- radio 单选按钮 -->
性别:
<label for="nan">男</label>
<input id="nan" type="radio" name="sex" value="nan" checked="checked">
<label for="nv">女</label>
<input id="nv" type="radio" name="sex" value="nv"><br />
<!-- checkbox 多选按钮 -->
<!-- checked 被选中 -->
爱好:
吃饭<input type="checkbox" name="hobby" value="chifan" checked="checked">
睡觉<input type="checkbox" name="hobby" value="shuijiao">
打豆豆<input type="checkbox" name="hobby" value="dadou"><br />
<!-- submit 提交按钮 -->
<input type="submit" value="免费注册"><br />
<!-- reset 重置按钮 -->
<input type="reset" value="重新填写"><br />
<!-- 点击按钮,搭配JS使用 -->
<input type="button" value="获取验证码"><br />
<!-- file 文件按钮 -->
上传头像:<input type="file"><br />
<!-- sleect 下拉表单元素 -->
<!-- option 选项 -->
<!-- selected 默认选择项 -->
籍贯:<select>
<option>山东</option>
<option selected="selected">北京</option>
<option>上海</option>
</select><br />
<!-- textarea 文本域表单元素 -->
个人介绍:<textarea></textarea>
</form>
网页中显示:
| type的属性值 | 描述 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选按钮 |
| checkbox | 复选按钮 |
| reset | 重置按钮 |
| submit | 提交按钮 |
| button | 点击按钮,搭配JS使用,例如“发送验证码” |
| file | 上传按钮 |
| hidden(不常用) | 定义隐藏的输入字段 |
| image(不常用) | 定义图像形式的提交按钮 |
input的其他属性
| 属性 | 描述 |
| name | 定义input的名称 |
| value | 定义input的值,当用户输入后传给后台 |
| checked | checked="checked";规定此input元素首次加载时被选中 |
| maxlength | 正整数,用户输入的最长字符 |
⑴name和value是每个表单元素都有的属性值,主要给后台人员使用
⑵name为表单元素的名字,单选按钮和复选按钮要有相同的name值
<balel></label>
用于绑定表单元素,当用户点击到<label></label>内的文本时,浏览器会自动将光标选择到对应的表单元素上。
例:
<label for="sex"></label>
<input type="radio" name="xingbie" id="sex"/>
2.select:下拉表单元素
例:出生年月
<select>
<option>01年</option>
<option>02年</option>
<option>03年</option>
</select>
selected="selected",在option定义,则当前项即为默认选中项
3.textarea:文本域元素 → <textarea></textarea>