表单
表单的作用
收集页面上用户填写的信息,用户提交表单时向服务器传输数据,从而实现用户与web服务器的交互。
表单定义及属性
HTML表单是包含表单元素的区域,表单使用<form>标签创建,form标签是块级元素。
action:提交的地址或者服务器,后台代码会根据这个地址进行处理,为空或者不写,表示提交到当前页面
method:定义浏览器将表单中的数据传递给服务器的方式,取值最常用的是GET/POST
target:在何处打开action,常见值:_blank在新窗口中打开,_self相同的框架中打开(默认),_parent在父框架中打开,_top在新窗口中打开,_framename指定的框架中打开
enctype:编码方式,默认值:application/x-www-form-urlencoded,包含文件上传控件时multipart/form-data
name:表单名称
表单元素
input标签
<input type="text" name="username" />/*主要属性:size指定文本框的宽度,以字符个数为单位,大多数浏览器缺省时为20;value指默认值;maxlength用户输入的最大字符长度;readonly只读属性;disabled禁用,不能获取焦点,不能修改,不能提交*/
<input type="password" name="password" /> /*文件显示为圆点*/
<input type="checkbox" name="color" value="red" />红色
<input type="checkbox" name="color" value="yellow" />黄色
<input type="checkbox" name="color" value="blue" />蓝色
<input type="radio" name="sex" value="male" />男性
<input type="radio" name="sex" value="female" />女性
<input type="file" accept="image/gif" />/*使用file时,form的enctype属性必须为multipart/form-data,method为post*/
<input type="hidden" name="ccc" value="123" /> /*隐藏域*/
<input type="submit" /> /*提交按钮*/
<input type="reset" />/*重置按钮*/
<input type="button" />/*普通按钮*/
select标签,下拉列表 value="-1"表示不选择,加上multiple属性表示允许多选(按Ctrl键)
<select name="color">
<option value="red">红色</option>
<option value="yellow">黄色</option>
<option value="blue" selected>蓝色</option>
</select>
textarea标签,多行文本
<textarea name="article" cols="30" rows="60"></textarea>
label文本,点击文本时input会获取焦点,for表示所要修饰的控件ID
<label for="username"></label>