应用标签控件理解:
1.form表单标签 <form name="form1" method="post" action="#">
2.表格标签 <table>,行使用<tr>标签,列使用<td>标签
3.输入普通文本框 <input type="text" name="username" />
4.输入密码框 <input type="password" name="password" />
5.下拉框应用<select name="sex">,对应的选项使用option标签,类似<option value="1">男</option>
6.单选框使用<input name="daxue" type="radio" checked/> 这里的checked标识这个选项默认被选中
7.无序列表的使用<ul>,每一个子项使用<li>标签
8.复选框(多选框)使用标签对应类型是checkbox,类似案例<input name="hobby[]" type="checkbox" value="1" />唱歌 </li>
9.这里的name写成hobby[]这里多了中括号[],是为了后台接收数据的时候可以方便地将数据整合到一起。
10.多行输入框,使用标签textarea,使用案例<textarea name="jianjie" cols="25" rows="10">我的简介</textarea>这表可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
11.提交按钮类型使用submit,这个类型的好处就是可以和form标签的提交行为进行联动 ,使用这个按钮的标签案例:<input type="submit" value="提交" />
12.重置按钮可以从来重置form标签内的所有输入控件,实际上就是讲输入的内容自动清空,按钮使用举例: <input type="reset" value="重置" />
13.普通按钮的使用标签button,使用举例<button type="button">现在去登录</button>这个标签的按钮有很多种类型,这里我们使用button可以使得按钮是一个普通按钮,我们可以通过js控制来将其联动其它行为。
网页设计界面:
源代码分享:
<html> <head> <title>注册账号,刘金玉编程</title> <style> form{ margin:0 auto; width:400px; } </style> </head> <body> <div style="text-align:center"><h1>注册账号</h1></div> <form name="form1" method="post" action="#"> <table> <tr><td>账号:</td><td><input type="text" name="username" /></td></tr> <tr><td>密码:</td><td><input type="password" name="password" /></td></tr> <tr> <td>性别:</td> <td> <select name="sex"> <option value="1">男</option> <option value="2">女</option> </select> </td> </tr> <tr> <td>是否上过大学:</td> <td> <input name="daxue" type="radio" checked/>是 <input name="daxue" type="radio" />否 </td> </tr> <tr> <td>兴趣爱好:</td> <td> <ul> <li><input name="hobby[]" type="checkbox" value="1" />唱歌 </li> <li><input name="hobby[]" type="checkbox" value="2" />跳舞 </li> <li><input name="hobby[]" type="checkbox" value="3" />编程 </li> </ul> </td> </tr> <tr> <td>简介:</td> <td><textarea name="jianjie" cols="25" rows="10">我的简介</textarea></td> </tr> <tr> <td> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </td> <td> <button type="button">现在去登录</button> </td> </tr> </table> </form> </body> </html>
如果你已经学会以上表单的开发,那么结合css样式,来尝试制作以下表单注册页面看看吧!