表单元素
action="提交地址"
method="提交方式"
get
post
input
type="radio" 单选按钮
注意: 同一组的name属性值必须一致,才可以达到互斥的效果
checked="checked"默认选中
type="checkbox" 多选框
注意: name值不需要一致
disabled="disabled" 禁止选择
type="file" 文件上传
select > option 下拉列表 > 下拉列表项
selected="selected"默认选中下拉项
textarea 多行文本输入框
cols="" 改变元素宽
rows="" 改变元素高
默认可以拖拽大小
resize:none; 禁止拖拽
注意: 不是px为单位,指的是容纳字符数,但是有偏差
可以通过设置样式修改大小
fieldset > legend 表单字段集 > 表单字段集标题
注意: 一个fieldset里面,只有一个直系legend
<fieldset>
<legend></legend>
<fieldset>
<legend></legend>
</fieldset>
</fieldset>
label 绑定选中标签
例:
<input type="radio" id="name">
<label for="name">你猜</label>
一个小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
textarea{resize:none;}
/*label{
display:inline-block;
width:150px;
text-align: right;
}*/
</style>
</head>
<body>
<form action="index.php" name="form1">
<fieldset>
<legend align="justify">个人信息</legend>
<p><label for="text">账号：</label><input id="text" type="text" placeholder="QQ号码/手机/邮箱" size="50"/></p>
<p><label>密码：</label><input type="password" placeholder="密码" /></p>
<p>
<input type="submit" value="登录" />
<input type="reset" value="重置" />
<input type="button" value="确定" />
</p>
<p>
<button>提交</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">确定</button>
</p>
</fieldset>
<fieldset>
<legend>其他信息</legend>
<fieldset>
<legend>你喜欢这个表单吗？</legend>
<p>
<label>你的性别：</label><input type="radio" name="sex" checked /> 男
<input type="radio" name="sex"/> 女
</p>
<p>
<label>你的爱好：</label><input type="checkbox" /> 足球
<input type="checkbox" /> 篮球
<input type="checkbox" /> 乒乓球
<input type="checkbox" disabled /> 吃饭
<input type="checkbox" disabled/> 睡觉
<input type="checkbox" disabled/> 打游戏
<input type="checkbox" checked /> 学习
<input type="checkbox" /> 游泳
</p>
</fieldset>
<fieldset>
<legend>你喜欢这个表单吗？</legend>
<p>
<label>你的生日：</label><select >
<option value="1">--请选择--</option>
<option value="1">1993</option>
<option value="1">1994</option>
<option value="1">1995</option>
<option value="1">1996</option>
<option value="1">1997</option>
<option value="1" selected>1998</option>
<option value="1">1999</option>
<option value="1">2000</option>
<option value="1">2001</option>
<option value="1">2002</option>
</select> 年
<select>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
<option value="1">10</option>
</select> 月
<select>
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
<option value="1">6</option>
<option value="1">7</option>
<option value="1">8</option>
<option value="1">9</option>
<option value="1">10</option>
</select> 日
</p>
<p>
<label>你的内心独白：</label><textarea cols="30" rows="10"></textarea></p>
<p>
<label>上传文件：</label><input type="file" /></p>
<p>
<label>隐藏表单：</label><input type="hidden" value="订单编号"/>
</p>
</fieldset>
</fieldset>
</form>
</body>
</html>
1293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
