html登陸頁面

HTML登錄註冊界面怎麼製作？

在沒有學習CSS樣式的前提下，是如何做一個簡單的註冊界面的。

一、表單標籤（form）

首先我們先寫一個<form></form>的標籤，form標籤屬於表單標籤，通常我們的登錄註冊界面都是有提交數據的，是和服務器交互用的，用戶在提交信息後，給服務器，服務器再根據提交的信息保存，這個時候就需要form標籤了。

form標籤裏面常見屬性有兩種：

action:這個是表單提交給某服務器的地址。

method:用什麼方式提交。通常我們常見的是：get（得到、成爲）和post這兩種，區別就是用戶在寫信息時顯示的是明文還是暗文。

　　　　Get:提交有長度限制，並且編碼後的內容地址欄可見。（不安全，少用）

<form action="指向交給誰,網頁地址" method="get"數據提交方式" />
//傳遞的值是有長度限制的。瀏覽器的地址欄裏面可以看到。特殊時用。

　　　　Post:提交無長度限制，並且編碼後內容不可見。

<form action="指向交給誰,網頁地址" method="post"數據提交方式" />
//傳遞的值沒有長度限制，瀏覽器的地址欄裏面不可以看到。常用。

        <form action="http://www.baidu.com" method="get">
            
                
        </form>

二、文本輸入

文本輸入有幾種公式：

//① 文本框公式
<input tyfe="text做文本框的" name="用戶名" value="值"/>
//②密碼框公式
<input tyfe="password" name="名字" value="值"/>
//密碼框可以讓用戶輸入的密碼顯示爲黑點。
//③隱藏域公式
<input tyfe="hidden" name="名字" value="值"/>
//這個提交表單是可以提交的，但是用戶是看不到的。
//④文本域公式（多行文本）
<textarea name="名字" cols="字符多少" rows="幾行高"</textarse>
//非常大的區域，用戶可以在裏面寫文章。

1、用戶註冊

先做一個用戶註冊界面，我們用文本框的方式進行編寫：

<form action="http://www.baidu.com" method="get">
            
            <table>
                
                <tr>        
                    
                    <td>用戶名：</td>
                    <td>
                        <!--<input type="text" name="userid" value="" placeholder="登錄名"/>-->
                        <input type="text" name="user" value=""/>
                    </td>
                        
                </tr>
    
                
            </table>
                
        </form>

因爲只寫了一條，整個表單的框還是看不出來的。

2、密碼框

               　　 <tr>
                    <td>密碼：</td>
                    <td>
                        <input type="password" name="pw" value="" />
                    
                    </td>

3、確認密碼

和密碼框是一樣的。屬於常用步驟。

三、選擇框

1、單選框（性別選項）

                <tr>
                
                    <td>性別：</td>
                    <td>
                        <input type="radio" name="sex"  id="man1" value="1" />
                        <label for="man1">男</label>
                        <input type="radio" name="sex" id="man2" value="0" />
                        <label for="man2">女</label>
                                            
                    </td>                
                </tr>

2、複選框

做一個類似於愛好類型的：

                <tr>
                    <td>愛好：</td>
                    <td>
                    
                        <input id="a1" type="checkbox" name="love" value="a" />
                        <label for="a1">抽菸</label>
                        
                        <input id="b1" type="checkbox" name="love2" value="b" />
                        <label for="b1">喝酒</label>
                        
                        <input id="c1" type="checkbox"  name="love3" checked="checked" value="c"/>
                        <label for="c1">美女</label>

                    </td>

四、下拉列表框

下拉列表標籤：<select></select>

<selet name="名字" size="等於1時爲列表" multiple="multiple"多選的意思/>

民族爲列：

                <tr>
                
                    <td>民族：</td>
                    <td>
                        <select name="nation">
                            <option value="1" selected>漢族</option>
                            <option value="2">滿族</option>
                            <option value="3">苗族</option>
                            <option value="4">回族</option>
                            <option value="5">彝族</option>
                            <option value="6">傣族</option>
                         </select>

                    </td>

                </tr>

六、按鈕

//1、普通按鈕

<input type="button" name="按鈕名字" value="值"/>

//如果想讓用戶讀不到，那麼可以添加一下：

<input type="button" name="按鈕名字" disabled="disabled" value="值"/>

//2、提示按鈕

<input type="submit" name="按鈕名字" valer="值"/>

//如果想讓用戶讀不到，那麼可以添加一下：

<input type="submit" name="按鈕名字" disabled="disabled" value="值"/>

//3、重置按鈕

<input type="reset" name="按鈕名字" valer="值"/>


//如果想讓用戶讀不到，那麼可以添加一下：

<input type="reset" name="按鈕名字" disabled="disabled" value="值"/>

//4、圖片按鈕

<input type="image" name="按鈕名字" src="圖片地址"/>

//如果想讓用戶讀不到，那麼可以添加一下：

<input type="image" name="按鈕名字" disabled="disabled" src="圖片地址">

註冊按鈕例：

               <tr>
                    <td colspan="2">
                        <input type="submit" value="註冊" />
                        <input type="reset" value="重置" />
                        <input type="image" src="HTML/1.gif" />

                    </td>
               </tr>