form表单常见控件应用，实例讲解注册页面的开发【2020网页综合笔记03】

刘金玉编程

发布于 2020-12-17 14:46:02

9550

文章被收录于专栏：编程创造城市编程创造城市

本文通过实例讲解表单的制作开发使用。

授课：刘金玉

编程创造城市

应用标签控件理解：

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>

这里的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样式，来尝试制作以下表单注册页面看看吧！