利用表单完成增加管理员界面设计
本案例就是一个增加管理员的注册界面编写。
知识应用：
HTML标记、表单标记、表格标记、<input>标签、<select>标签、<option>标签、<textarea>标签。
制作步骤：
（1）使用<form></form>制作表单。为了达到整齐效果，内嵌<table></table>标记，设置表格与屏幕的显示比例width为600px。
（2）使用<tr></tr>标记设置表格的每一行。
（3）使用<th></th>设置行头，使用<td></td> 设置行的数据
（4）在行内，使用<input>标签设置姓名、密码、重置密码、头像。通过type属性区分不同用途。
（5）使用<input>标签设置性别，type属性选择“radio”。
（用户登录界面设计代码html6）角使用<input type="checkbox"> 进行控制，为了让三个角一组，可以选择<fieldset>进行分块控制，<legend>请选择</legend>给出选择头。
（7）状态可以使用<select>标签进行控制，使用<option>添加选项。可以实现下拉列表选择。
（8）所属地也使用<select>标签进行控制，使用<option>添加选项。需要增加multiple属性以实现列表多项选择。
（9）描述使用<textarea>标签可以输入多行多列文本
（10）按钮使用<input type="submit" value="提交">  <input type="reset" value="重置">。
参考代码：
<html>
<head>
  <title>增加管理员 </title>
</head>
<body>
  <form action="">
  <h2>增加管理员</h2>
  <table width=600px>
  <tr>
    <td width=80px>姓名：</td>
<td width=180px><input type="text" name="userName" maxLength=10>*</td>
    <td>10个字符以内的字母、数字和下划线的组合</td>
  </tr>
    <tr>
    <td>密码：</td><td><input type="password" name="passWord" maxLength=6>*</td> <td>6位数字</td>    </tr>
    <tr>    <td>重置密码：</td>
    <td><input type="password" name="passWord" maxLength=6>*</td>    <td>两次密码必须相同</td>
    </tr>    <tr>    <td>性别：</td>
    <td><input type="radio" id="sexmale" name="sex" value="male" checked="checked"/><label for="sexmale">男</label><input type="radio" id="sexfemale" name="sex" value="female" /><label for="sexfemale">女</label></td>    <td></td>    </tr>
    <tr>    <td>角：</td>
    <td><fieldset><legend>请选择</legend><input type="checkbox" name="role" value="stu
dent"  checked>学生管理员<br><input type="checkbox" name="role" value="teacher">教师管理员<br><input type="checkbox" name="role" value="super"  checked>超级管理员</fieldset></td>    <td><span>*</span>至少选择一个</td>
    </tr><tr>
<td>状态：</td>
<td><select name="status" id="status"><option value="qy">启用</option><option value="ty">停用</option><option value="sc">删除</option></select></td>
<td></td>
</tr>
<tr>
<td>所属地：</td>
<td><select name="place" id="place" size=5 multiple><option value="pds">平顶山</option><option value="ly">洛阳</option><option value="ny">南阳</option><option value="sq">商丘</option><option value="zk">周口</option><option value="xy">信阳</option></select></td>
<td></td>
</tr>
<tr>
<td>描述：</td>
<td colspan="2"><textarea name="ms" id="ms" cols="20" rows="6">请进行描述</textarea></td>
</tr>
<tr>
<td>头像：</td>
<td colspan="2"><input type="file" name="tx" size="20" accept="jpg/gif">上传头像</td>
</tr>
    <tr>  <td> </td>   
    <td><input type="submit" value="提交">  <input type="reset" value="重置"></td></tr>
  </table>
  </form>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。