html/form表單常用屬性認識_ZenDei技術網路在線

html/form表單常用屬性認識

-Advertisement-

1、form表單常用屬性練習得到的效果是： ...

1、form表單常用屬性練習

 <style>
        .form1 {
            margin: auto;
            height: 900px;
            width: 500px;
            text-align: center;
            line-height: 40px;
            letter-spacing: 2px;
            border: 1px solid red;
        }
        
        .img {
            height: 50px;
            width: 50px;
        }
    </style>
</head>

<body>
    <div class="form1">
        <form action="">
            <span>用&nbsp;戶&nbsp;名：</span><input type="text" placeholder="請輸入用戶名"><br>
            <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;碼：</span><input type="password"><br>
            <span>確認密碼：</span><input type="password"><br>
            <span>性&nbsp;&nbsp;別：</span> &nbsp;&nbsp; &nbsp;&nbsp;
            <input type="radio" name="radio" id="radio" value="nan" checked>
            <label for="radio">男</label>
            <input type="radio" name="radio" id="radio1">
            <label for="radio1">女</label><br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>愛好:</span>
            <input type="checkbox" name="box1" id="box1">
            <label for="box1">閱讀</label>
            <input type="checkbox" name="box2" id="box2">
            <label for="box2">足球</label>
            <input type="checkbox" name="box3" id="box3">
            <label for="box3">游戲</label><br>
            <span>電話號碼：</span> <input type="tel" pattern="1\d{10}" title="請輸入正確的手機號" maxlength="11" placeholder="請輸入手機號"><br>
            <span>郵箱：</span> <input type="email" title="請輸入正確的郵箱" placeholder="請輸入郵箱"><br>
            <span>驗證碼：</span> <input type="text" placeholder="請輸入驗證碼"><br>
            <br>
            <input type="submit" value="註冊">
            <input type="reset" value="重置"><br>
            <br>
            <span>顏色選擇器</span> <input type="color"><br>
            <span>日期</span> <input type="date" value="2019-11-12"><br>
            <span>日期+時間</span> <input type="datetime-local" value="2018-11-12T00:23"><br>
            <span>時間</span> <input type="time" value="00:20"><br>
            <span>月份</span> <input type="month" value="2018-09"><br>
            <span>周數</span> <input type="week" value="2019-W02"><br>

            <span>圖片提交</span> <input type="image" src="img/安卓.png" class="img">
            <h1>下拉列表</h1>
            <select name="city" id="" size="1">
                <optgroup label="第一">
                <option value="nanchang">南昌</option>
                <option value="nanchong">南充</option>
            </optgroup>
            <optgroup label="第二">
                <option value="chengdu" selected >成都</option>
                <option value="xizang">西藏</option>
            </optgroup>
            </select>
            <input type="text" list="apple">
            <datalist id="apple">
            <option >西瓜</option>
            <option >香蕉</option>
            <option >草莓</option>
            </datalist>


        </form>
    </div>
</body>

得到的效果是：

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

js鉤子函數實現一個簡單動畫

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style> #ball { width: 20px; height: 20px; border-radius: 50%; background: pink; ... ...
事件流程以及dom2級事件綁定

事件流程分為三個階段：捕獲階段、目標階段、冒泡階段。捕獲階段：事件從最頂層元素開始執行，一層層往下，直到精確元素。目標階段：事件在精確元素上執行。冒泡階段：事件從精確元素開始執行，一層層往上，直到頂層元素（註：高級瀏覽器的頂層元素是window，ie8以下的瀏覽器頂層元素是document） ...
插件的使用

學習以及面試過程中，都會著重原生的東西，但實際開發過程中，很少會用原生寫項目，一線城市就是vue、react、以及Angular 的使用比較多，jQuery也有，但相對二線城市來說會少一些，但也不是沒有。以前的jQuery就是王者，現在jQuery是入門。以前可能需要花很大的精力去學習jQuery ...
JavaScript中的null和undefined

1.概述 null和undefined屬於js中兩種不同的基本數據類型，都可以表示“沒有”，含義非常相似。將一個變數賦值為undefined或null，老實說，語法效果幾乎沒區別。並且在if語句的判斷條件中，它們都會自動轉為false，相等運算符（==）甚至直接報告兩者相等 null是一個表示“空” ...
作用域

作用域作用域表示一個代碼區域，也表示一個運行環境 JS中，有兩種作用域：全局作用域直接在腳本中書寫的代碼在全局作用域中聲明的變數，會被提升到腳本塊的頂部，並且會成為全局對象的屬性。函數作用域函數中的代碼在函數作用域中聲明的變數，會被提升到函數的頂部，並且不會成為全局對象的屬性. 因此， ...
版本管理——Git和SVN的介紹及其優缺點

版本管理概念：版本管理是軟體配置管理的基礎，它管理並保護開發者的軟體資源。好處：可以保留我們的歷史版本，在代碼開發到一半的時候，不至於無故丟失，還可以查看BUG的來龍去脈。版本管理種類：集中式的版本管理和分散式的版本管理。實現的控制軟體分別有SVN和Git。瞭解了版本管理的概念那就進入主題， ...
ECMAScript(ES) 6 之 let 與 const

ES6 新增加了兩個重要的 JavaScript 關鍵字：let 和 const 先說一下 const ：它用於聲明一個只讀的常量，一旦聲明，常量的值就不能改變。由於const聲明的是一個只讀變數，不可被改變，所以聲明變數是就必須賦值，否自也會報錯。要註意的是用const聲明的常量如果是一個 ...
Jquery選擇器學習記錄

1、選擇第一級子節點通過> 或者children方法實現 $('#XtraTabPage8>.datagrid-ftable') $('#XtraTabPage8').children('.datagrid-ftable') 2、選擇所有的子節點，即後代節點通過空格實現 $('#XtraTabP ...