老雷html/css开发视频教程之form表单元素
1.form 表单
<form action="post.php" method="post" target="_self" autocomplete="off" enctype="multipart/form-data" >
</form>
属性列表
action 规定当提交表单时向何处发送表单数据
method 数据请求方式 get post
enctype 规定在发送表单数据之前如何对其进行编码
application/x-www-form-urlencoded 默认
multipart/form-data 表单含文件上传时必须使用 file
target 打开方式 _blank,_self
autocomplete 规定是否启用表单的自动完成功能。
on 开启
off 关闭
2.fieldset 将表单内的相关元素分组
legend fieldset 元素定义标题
3.label 标签为 input 元素定义标注
4.input 标签用于搜集用户信息
<input name="title" type="text" value="这是input标签" placeholder="默认内容提示" checked readonly disabled />
name 名称
type
text 单行文本框
hidden 隐藏
password 密码类型
radio 单选框
checkbox 复选框
file 文件上传
value 值
placeholder 规定帮助用户填写输入字段的提示
readonly 只读
disabled 禁用
checked 选中，针对radio checkbox
5.textarea 多行文本框
<textarea name="content" placeholder="默认内容提示" readonly disabled>内容在标签里面哦</textarea>
属性列表
name 名称
placeholder 规定帮助用户填写输入字段的提示
readonly 只读
disabled 禁用
rows 规定文本区内的可见行数
6.select 菜单列表
<select size="1" multiple name="select">
<option selected value="0">选项二</option>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
</optgroup>
</select>
select属性列表：
name 下拉列表的名称
disabled 禁用该下拉列表。
multiple 规定可选择多个选项
size 属性规定下拉列表中可见选项的数目
option 具体选项
属性列表
disabled 禁用
selected 选中状态
value 值
optgroup 选项组
label 选项组规定描述
disabled 禁用
7.button 按钮
属性列表
name 名称
value 值
type 按钮类型
button 按钮
reset 重设按钮
submit 提交按钮
disabled 禁用
课后练习
自己做一个留言板的表单
主题 单行文本
昵称 单行Q
电话 单行
内容 多行文本
提交按钮 重设按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<style>
.mgb-10{
margin-bottom: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>legend</legend>
<div class="mgb-10">
<label>标题</label>
<input type="text" id="title" name="title" value="" placeholder="这是单行文本框" />
<input type="hidden" />
</div>
<div class="mgb-10">
<textarea name="title" value="" placeholder="这是文本框">这是多行文本</textarea>
</div>
</fieldset>
<div class="mgb-10">
<label>性别</label>
<input type="radio" class="gender" name="gender" value="1" />男
<input type="radio" checked name="gender" value="1" />女
</div>
<div class="mgb-10">
<input type="checkbox" name="techang[]" value="1" /> 音乐
<input type="checkbox" checked name="techang[]" value="1" /> 美术
</div>
<div class="mgb-10">
<select name="select">
<option value="0">这是列表选择框</option>
<option value="0" selected="selected">选项一</option>
<option value="0">选项二</option>
</select>
<select>
<optgroup label="Swedish Cars">
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value ="mercedes">Mercedes</option>
<option value ="audi">Audi</option>
</optgroup>
</select>
</div>
<div class="mgb-10">
<input type="file" name="file" />
这是文件上传
</div>
<div class="mgb-10">
<button type="submit">提交</button>
<button type="reset">重设</button>
<button type="button">按钮</button>
</div>
</form>
</body>
</html>