利用HTML表单标签编写一个注册页面

时间:2024-02-22 18:37:12

今天我们来写一个注册页面

form表单

先来利用表单标签制作一个简单的注册页面,给大家说说标签的结构:

页面结构大体就是这样子的~


640?wx_fmt=jpeg

表单标签:

<form action="#" method="">

所有需要提交到服务器端的表单项必须使用<form></form>包起来~


form标签的属性:

action:整个表单提交的位置(可以是一个页面,也可以是一个后台的Java代码)

method:表单的提交方式(get/post)


文本输入框:

<input type="text"/ >

密码输入框:

<input type="password" />



单选按钮:

<input type="radio" />

多选按钮:

<input type="checkbox"/>

主意:在这边需要用name属性给按钮分一下组~


下拉列表:

<select name="province">

    <option>--请选择--</option>

    <option>选项</option>

</select>


文本输入域:

<textarea></textarea>


提交按钮:

<input type="submit" value="注册" />

重置按钮:

<input type="reset" value="重置" />

普通按钮:

<input type="button" value="普通按钮" />

上面的注册页面不是那么好看,下面我们用上次学过的表格标签(<table>)来修饰一下这个页面~


640?wx_fmt=png


下面是修改后的页面的源代码:

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>用户注册</title>
 </head>
 <body>
   <form action="#" method="post">  
     <table border="0px" width="600px" height="400px" align="center" cellpadding="0px" cellspacing="0px">
       <tr height="40px" >
         <td colspan="2">
           <font size="4" ><b>用户注册&nbsp;USER REGISTER</b></font>
         </td>
       </tr>
       <tr>
         <td align="center"><b>用户名</b></td>
         <td><input type="text" name="user"/></td>
       </tr>
       <tr>
         <td align="center"><b>密码</b></td>
         <td><input type="password" name="password"/></td>
       </tr>
       <tr>
         <td align="center"><b>确认密码</b></td>
         <td><input type="password" name="rpassword"/></td>
       </tr>
       <tr>
         <td align="center"><b>Email</b></td>
         <td><input type="text" name="email"/></td>
       </tr>
       <tr>
         <td align="center"><b>姓名</b></td>
         <td><input type="text" name="username"/></td>
       </tr>
       <tr>
         <td align="center"><b>性别</b></td>
         <td>
           <input type="radio" name="sex" value="男"/>
           <input type="radio" name="sex" value="女"/>
         </td>
       </tr>
       <tr>
         <td align="center" ><b>出生日期</b></td>
         <td> <input type="text" name="birthday" size="30px"/></td>
       </tr>
       <tr>
         <td align="center"><b>验证码</b></td>
         <td> <input type="text" name="yzm" />
           <img src="../img/yzm.png" width="60" height="30"/>
         </td>
       </tr>
       <tr>
         <td colspan="2" align="center">
            <input type="submit" value="注册" />
            <input type="reset" value="重置" />
         </td>        
       </tr>
     </form>
   </table>
 </body>
</html>


注意哦~这边会有一道面试题的

Get 与 Post 提交方式的区别?

Get(默认)提交方式,

所有的内容显示的地址栏,不安全,长度有限制.

Post提交方式,

所有的内容不会显示在地址栏,比较安全,长度没有限制.



640?wx_fmt=jpeg

我是萌新娜娜

立志做一个不翻车的老司机

学习Java的路上请多多指教


扩展阅读

来认识一下HTML中的标签~

Java面试题42.简单说一下html5

15个关于HTML的入门问题


来源:Java联盟

版权声明:文章来源网络,版权归作者本人所有,如侵犯到原作者权益,请与我们联系删除或授权事宜