一使用button定义按钮
除了可以使用 更强大功能
<button type="按钮类型">
普通文本、格式化文本、图像
</button>
button标签属性说明
| 属性名 |
说明 |
| disabled |
指定是否禁用此元素.该属性只能是disable或者省略 |
| name |
指定该按钮的唯一名称 |
| type |
指定该按钮属于哪一种按钮，只能是button,reset,submit |
列表框和下拉菜单
<select name="指定列表名称" size="行数">
<option value="选项值" selected="selected">...</option>
</select>
列一常用属生
| 属性名 |
说明 |
| disabled |
指定是否禁用此元素。该属笥只能是disabled或者是省略 |
| mutiple |
设置该列表框是滞允许多选 |
| size |
指定该列表内同时显示多 少个列表项 |
案例
<select id="city" name="city" multiple="multiple" size="3">
<option>北京</option>
<option>上海</option>
<option>南昌</option>
<option>杭州</option>
</select>
<optgroup>用于定义 列表项目或菜单项组，它的常用属性如下:
| 属性名 |
说明 |
| label |
指定该选项组的标签。这个属性必填 |
| disable |
禁用该选项组里的所有选项，该属性值只能是disabled或省略 |
上课案例
<!DOCTYPE html>
<html>
<head>
<title>表单案例</title>
<meta charset="utf-8">
<style type="text/css">
.labeltext{
float: left;
}
</style>
</head>
<body>
<input type="input" name="email">
<form action="index.html" method="get">
<font width="80px">用户名：</font>
<input type="hidden" name="idcard" value="3622892392434543">
<input type="input" maxlength="10" size="10" name="username"/><br/>
<font width="80px">密码：</font><input type="password" name="password"><br>
邮箱：<input type="email" name="email"></br>
性别:<input type="radio" name="sex" checked="checked" value="男" >男
<input type="radio" name="sex" checked="checked" value="女" >女
<input type="radio" name="sex" value="保密" >保密 </br>
爱好：<input type="checkbox" checked="checked" name="aihao">
打台球
<input type="checkbox" checked="checked" name="aihao">
打玻璃球
<input type="checkbox" name="aihao">
打篮球
<br>
<select name="city" size="3">
<option> 上海 </option>
<option> 北京</option>
<option> 南京</option>
<option> 南昌</option>
<option> 杭州</option>
</select>
<select name="shenfen" size="4">
<optgroup label="江西">
<option> 南昌 </option>
<option> 赣州</option>
<option>宜春</option>
<option>吉安</option>
</optgroup>
<optgroup label="浙江">
<option>杭州</option>
<option>温州</option>
<option>义乌</option>
<option>金华</option>
</optgroup>
</select>
<br>
<font class="labeltext" >描述：</font>
<textarea rows="6" cols="50">
</textarea>
<br>
<input type="button" name="button" value=" 按钮 "/>
<input type="submit" value="提交" name="submit">
<input type="reset" value="重置" name="reset">
<button type="reset" name="重置" > 重置</button>
</form>
</body>
</html>
上课案例2
<!DOCTYPE html>
<html>
<head>
<title>王者荣耀注册</title>
<meta charset="utf-8">
<style type="text/css">
body{
width: 500px;
}
</style>
</head>
<body>
<h2>王者荣耀注册</h2>
<form action="success.html" method="post">
<fieldset >
<legend>基本信息</legend>
<img src="default_head.png" width="50px" height="50px" alt="头像" />
<input type="file" name="head"> <br>
选择账号类型:
<input type="radio" name="accountType" value="1"> QQ
<input type="radio" name="accountType" checked="checked" value="2"> 微信<br>
创建游戏昵称: <input type="text" name="nikename" value=""> <br>
性别: <input type="radio" name="sex" value="1"> 男 <input type="radio" name="sex" checked="checked" value="0"> 女
<br>
选择服务器:
<select>
<optgroup label="0~7区">
<option>突进白刃</option>
<option>血月之士</option>
<option>狂乱奔流</option>
<option>乱舞心火</option>
<option>无畏铁躯</option>
<option>净化共鸣</option>
<option>阳炎回声</option>
</optgroup>
<optgroup label="8~14区">
<option>突进白刃</option>
<option>血月之士</option>
<option>狂乱奔流</option>
<option>乱舞心火</option>
<option>无畏铁躯</option>
<option>净化共鸣</option>
<option>阳炎回声</option>
</optgroup>
</select>
</fieldset>
<fieldset>
<legend>可选信息</legend>
<br>
常用角色类型:<input type="checkbox" name="role" value="1">坦克
<input type="checkbox" name="role" value="2">法师
<input type="checkbox" name="role" value="2">射手(ADC)
<input type="checkbox" name="role" value="2">刺客
<input type="checkbox" name="role" value="2">辅助 <br>
<textarea cols="50" rows="7">描述你的性格</textarea>
</fieldset>
<center>
<input type="submit" value="注册"> <input type="reset" name="reset">
<button type="reset">注册</button>
</center>
</form>
</body>
</html>
效果
EE59AC35-14BB-45E3-91C7-061194D73A58.png
