__x__(45)0910第六天__各類表單

時間  2019-11-08
標籤 第六 各類 表單 欄目 HTML 简体版
原文   原文鏈接

效果圖：css

 

 

html代碼：html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表格</title>
        
        <link rel="stylesheet" type="text/css" href="css/form.css" />
    </head>

    <body>
        Hello Web!`    <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        form 是<b>塊元素</b>，獨佔一行。
        
        <div >
            <form action="deal.html" id="userregist" >
                
                <!-- 表單項分組fieldset -->
                <!-- legend子標籤，設置組名，並顯示在頁面上。 -->
                <!-- 服務器要求使用。 -->
                <fieldset>
                    <legend>用戶帳號密碼</legend>
                    
                    <!-- 標籤框 label    擁有一個for屬性，指定一個表單項的id -->
                    <label for="regname">用&nbsp;&nbsp;&nbsp;戶&nbsp;&nbsp;&nbsp;名&nbsp;：</label>
                    
                    <!-- 文本框 text -->
                    <input type="text" id="regname" name="username" value="" /><br />
                    
                    <br />
                    <!-- 密碼框 password -->
                    請設置密碼：
                    <input type="password" name="userpassword1" value=""/><br />
                    
                    <br />
                    再輸入密碼：
                    <input type="password" name="userpassword2" value=""/><br />
                </fieldset>
                
                <br />
                <!-- 單選按鈕 radio    name相同的按鈕是爲一組，    最好設置value -->
                <!-- 設置默認選項：checked="checked" -->
                性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;別：
                <input type="radio" name="usersex" value="boy" />男
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="usersex" value="girl" checked="checked"/>女<br />
                
                <br />
                <!-- 多選按鈕 checkbox -->
                <!-- 設置默認選項：checked="checked" -->
                水&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;果：
                <input type="checkbox" name="userfood" value="boy" />蘋果
                <input type="checkbox" name="userfood" value="pear" checked="checked" />梨
                <input type="checkbox" name="userfood" value="girl" checked="checked" />香蕉<br />
                
                <br />
                <!-- 下拉列表 select    使用 option 設置選項    name指定給select    value 指定給 option -->
                <!-- 設置默認選項：selected="selected" -->
                住&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：
                <select name="userhome">
                    <option value="hn">北京</option>
                    <option value="gd">上海</option>
                    <option value="cs">長沙</option>
                    <option value="sz">深圳</option>
                    <option value="zjj" selected="selected">張家界</option>
                </select><br />
                
                <br />
                <!-- 多選下拉列表：multiple="multiple" -->
                愛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;好：
                <select name="userhobby" multiple="multiple">
                    <option value="draw" selected="selected">畫畫</option>
                    <option value="swim">游泳</option>
                    <option value="run">跑步</option>
                    <option value="sleep" selected="selected">睡覺</option>
                </select><br />
                
                <br />
                <!-- 多選下拉列表選項分組 -->
                偶&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像：
                <select name="userstar" multiple="multiple">
                    <optgroup>
                        <option value="JM" selected="selected">約瑟夫 摩根</option>
                        <option value="CL">成龍</option>
                        <option value="WJ">吳京</option>
                    </optgroup>
                    
                    <optgroup>
                        <option value="ZLY" >趙麗穎</option>
                        <option value="LYF" selected="selected">劉亦菲</option>
                    </optgroup>
                </select><br />
                
                <br />
                <!-- 文本域 textarea -->
                自我簡介：
                <textarea name="userword">
                    
                </textarea><br />
                
                <input type="reset" value="從新填寫" id="resetuser" />
                <input type="submit" value="立刻註冊" id="submituser" />
                
                <!-- 建立一個單純的按鈕，沒有任何功能，只能被點擊。 -->
                <!-- 結合JS實現無限功能。 -->
                <input type="button" value="已有帳號，如今登陸"/><br />
                
                <!-- 如下按鈕更加靈活，成對出現，能夠在中間設置<img > -->
                <button type="reset">從新填寫</button>
                <button type="submit">立刻註冊</button>
                <button type="button">已有帳號，如今登陸</button><br />
                
            </form>
        </div>
    </body>
</html>

 

 

css代碼：服務器

@charset "utf-8";

*{
    margin: 0px;
    padding: 0px;
}

.clearfix {
    zoom:1;
}

.clearfix:before,
.clearfix:after {
    content:"";
    display: table;
    clear: both;
}

body{
    background-color: #3e4e54;
}

#userregist{
    width: 500px;
    margin: 0px auto;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程