HTML&CSS form表單 註冊頁面

原創 小帅子Lv 2018-09-13 10:42

1、HTML的表單標籤 form表單 CSS樣式

HTML標籤：表單標籤

1、form表單的基礎介紹
    A.格式
        <form action="http://www.baidu.com" method="get"> ... </form>
    B.屬性
        a. action存放的是URL 網址.（把表單項"輸入框"當中的數據,提交到網址對應的服務器上）
        b. method 設置請求的方式 get請求和post請求
            get特點:  在地址欄有參數信息,數據量小,不安全
            post特點: 在地址欄沒有參數信息,數據量大,安全
    C.注意
        如果要提交數據到地址欄,必須設置 【name】屬性
2、input標籤
    A.type屬性   根據type屬性的取值不同,表單項當中的類型就不一樣
        a. text 用戶名的輸入框
        b. password 密碼的輸入框
        c. radio 性別的單選按鈕
        d. checkbox 愛好的多選按鈕
        e. submit 提交按鈕
        f. button 普通按鈕 和後期JavaScript 組合使用
        g. image 圖片按鈕
        h. file 上傳的文件選擇框
        i. hidden 隱藏域.看不到UI界面,但是存在.
        j. date 選擇日曆的
        k.datetime 
        l.datetime-local 
        m.email 
    B.name屬性
        a. 提交地址欄上面的name.給服務器進行識別的標誌
        b. 對於單選按鈕radio而言,設置相同的name屬性,表示在同一組當中
        c. 對於多選按鈕checkbox而言,設置相同的name屬性,表示在同一組當中
    C.value屬性
        給我們那些不能讓用戶輸入的 表單項,設置的值
    D.id屬性
        a.可以給後面的CSS設置樣式的識別器
        b.可以給後面的JS設置識別具體是哪一個標籤需要加特效.
    E.placeholder屬性
        增強用戶體驗,給出默認提示信息的.
3、select 下拉列表
    A.格式
        <select>
            <option value="China"> 中國 </option>
            <option value="USA"> 美國 </option>
            <option value="England"> 英國 </option>
        </select>
4、textare 文本域
    A.格式 (例如:自我介紹)
        <textarea cols="20" rows="5"></textarea>

CSS：頁面美化和佈局控制

1、CSS引入的三種方式
    A.內聯樣式
        a.作用域:在當前的標籤上面
        b.格式:
            <font style="font-size: 88px;color: #FF9900"> 你是真的不錯！心有多大,字有多大 </font>
    B.內部樣式
        a.作用域:在當前的HTML頁面上面
        b.格式:
            <head>
                <meta charset="UTF-8">
                <title>CSS入門</title>

                <style type="text/css">
                    font{
                        font-size: 66px;
                        color: #0000FF
                    }
                </style>
            </head>
            <body>
                <font style="font-size: 88px;color: #FF9900"> 你是真的不錯！心有多大,字有多大 </font>
                <br><br>
                <font> 牛逼啊 </font>
                <br><br>
                <font> 我的哥就是你哥 倪歌(你哥) </font>
            </body>
    C.外部樣式
        a.作用域: 只要你引入了外部樣式,整個頁面都可以使用.(需要在外部新建CSS文件)
        b.格式:
            <!-- HTML 代碼 -->
            <head>
                <meta charset="UTF-8">
                <title>CSS入門</title>

                <link rel="stylesheet" href="css/a.css">
            </head>
            <body>
                <font> 牛逼啊 </font>
                <br><br>
                <font> 我的哥就是你哥 倪歌(你哥) </font>
            </body>
            <!-- CSS 代碼 --> 
            font{
                font-size: 44px;
                color: #FF0000
            }   

        1. 基礎選擇器
            1. id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一
                * 語法：#id屬性值{}
            2. 元素選擇器：選擇具有相同標籤名稱的元素
                * 語法： 標籤名稱{}
                * 注意：id選擇器優先級高於元素選擇器
            3. 類選擇器：選擇具有相同的class屬性值的元素。
                * 語法：.class屬性值{}
                * 注意：類選擇器選擇器優先級高於元素選擇器
        2. 擴展選擇器：
            1. 選擇所有元素：
                * 語法： *{}
            2. 並集選擇器：
                * 選擇器1,選擇器2{}

            3. 子選擇器：篩選選擇器1元素下的選擇器2元素
                * 語法：  選擇器1 選擇器2{}
            4. 父選擇器：篩選選擇器2的父元素選擇器1
                * 語法：  選擇器1 > 選擇器2{}

            5. 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
                * 語法：  元素名稱[屬性名="屬性值"]{}

            6. 僞類選擇器：選擇一些元素具有的狀態
                * 語法： 元素:狀態{}
                * 如： <a>
                    * 狀態：
                        * link：初始化的狀態
                        * visited：被訪問過的狀態
                        * active：正在訪問狀態
                        * hover：鼠標懸浮狀態
 屬性
    1. 字體、文本
        * font-size：字體大小
        * color：文本顏色
        * text-align：對其方式
        * line-height：行高 
    2. 背景
        * background：
    3. 邊框
        * border：設置邊框，符合屬性
    4. 尺寸
        * width：寬度
        * height：高度
    5. 盒子模型：控制佈局
        * margin：外邊距
        * padding：內邊距
            * 默認情況下內邊距會影響整個盒子的大小
            * box-sizing: border-box;  設置盒子的屬性，讓width和height就是最終盒子的大小

        * float：浮動
            * left
            * right

案例：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>註冊頁面</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            background: url("img/register_bg.png") no-repeat center;
            padding-top: 25px;
        }

        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*讓div水平居中*/
            margin: auto;
        }

        .rg_left{
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        .rg_left > p:first-child{
            color:#FFD026;
            font-size: 20px;
        }

        .rg_left > p:last-child{
            color:#A6A6A6;
            font-size: 20px;

        }


        .rg_center{
            float: left;
           /* border: 1px solid red;*/

        }

        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }

        .rg_right > p:first-child{
            font-size: 15px;

        }
        .rg_right p a {
            color:pink;
        }

        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px ;
        }

        #username,#password,#email,#name,#tel,#birthday,#checkcode{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6 ;
            /*設置邊框圓角*/
            border-radius: 5px;
            padding-left: 10px;
        }
        #checkcode{
            width: 110px;
        }

        #img_check{
            height: 32px;
            vertical-align: middle;
        }

        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026 ;
        }

    </style>

    </head>
    <body>

    <div class="rg_layout">
        <div class="rg_left">
            <p>新用戶註冊</p>
            <p>USER REGISTER</p>

        </div>

        <div class="rg_center">
            <div class="rg_form">
                <!--定義表單 form-->
                <form action="#" method="post">
                    <table>
                        <tr>
                            <td class="td_left"><label for="username">用戶名</label></td>
                            <td class="td_right"><input type="text" name="username" id="username" placeholder="請輸入用戶名"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="password">密碼</label></td>
                            <td class="td_right"><input type="password" name="password" id="password" placeholder="請輸入密碼"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="email">Email</label></td>
                            <td class="td_right"><input type="email" name="email" id="email" placeholder="請輸入郵箱"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="name">姓名</label></td>
                            <td class="td_right"><input type="text" name="name" id="name" placeholder="請輸入姓名"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="tel">手機號</label></td>
                            <td class="td_right"><input type="text" name="tel" id="tel" placeholder="請輸入手機號"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label>性別</label></td>
                            <td class="td_right">
                                <input type="radio" name="gender" value="male"> 男
                                <input type="radio" name="gender" value="female"> 女
                            </td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="birthday">出生日期</label></td>
                            <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="請輸入出生日期"></td>
                        </tr>

                        <tr>
                            <td class="td_left"><label for="checkcode" >驗證碼</label></td>
                            <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="請輸入驗證碼">
                                <img id="img_check" src="img/verify_code.jpg">
                            </td>
                        </tr>


                        <tr>
                            <td colspan="2" align="center"><input type="submit" id="btn_sub" value="註冊"></td>
                        </tr>
                    </table>

                </form>


            </div>

        </div>

        <div class="rg_right">
            <p>已有賬號?<a href="#">立即登錄</a></p>
        </div>


    </div>


    </body>
    </html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章