close

@ type="search"

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
serch： <input type="search"><br/>
text： <input type="text">
</body>
</html>

 

輸出畫面：

1521797914029.jpg

1550209507441.jpg

 

@ type="email"、"url"、"tel"

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
    <form action="">
        <label for="">
            email: <input type="email" title="請輸入mail">
        </label>
        <label for="">
            url: <input type="url">
        </label>
        <label for="">
            tel: <input type="tel">
        </label>
        <button>OK</button>
    </form>
</body>
</html>

 

輸出畫面：

1521797914029.jpg

1521797914029.jpg

1521797914029.jpg

1550210444937.jpg

1550210467498.jpg

 

@ type="datetime"、"date"、"time"

※ data 格式 yyyy-mm-dd   例：2018-01-15
　time格式：mm:ss 例：20:16

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
    <form action="">
        <label for="">
            datetime: <input type="datetime">
        </label>
        <label for="">
            date: <input type="date" max="2018-03-29" min="2018-03-01">
        </label>
        <label for="">
            time: <input type="time" >
        </label>
        <button>OK</button>
    </form>
</body>
</html>

 

輸出畫面：

1521797914029.jpg

1550210595361.jpg

1550210674745.jpg

@ type="number"

number輸入類型會將數字限制為有效數字，具體而言是一個浮點數。
可以使用min max屬性來限制輸入數值，step屬性來指定數值遞增量

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
    <form action="">
        <label for="">
            number: <input type="number" max="20" min="10" step="2">
        </label>
        <button>OK</button>
    </form>
</body>
</html>

 

輸出畫面：

1521797914029.jpg

1550210760722.jpg

 

@ type="range"

range 輸入類型很像　number，也會將值限制為有效的淨點數值。此功能應該在不重視精確數值的案列中使用。
可與 max min 及 step 屬性一併使用

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
    <form action="">
        <label for="">
            range: <input type="range" max="10" min="1" step="2">
        </label>
        <button>OK</button>
    </form>
</body>
</html>

 

輸出畫面：

1521797914029.jpg

1550210848633.jpg

 

@ type="color"

color 輸入類型會以 16 進位格式將值限制為有效的 RGB 值，包含在六位數前的數字符號 # 號，Chrome 65 、 Firefox 59 點選 input 後皆會彈出選擇顏色視窗

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
    <form action="">
        <label for="">
            color: <input type="color">
        </label>
        <button>OK</button>
    </form>
</body>
</html>

 

輸出畫面：

1521797914029.jpg

1550210939081.jpg

 

@ datalist

datalist 元素的用途是定義一串輸入控制項的建議值，本身不是表單或控制項。
如同 select 元素一般，這些建議值是以 option 元素來指定。但除非 datalist 與某項 input 元素結合在一起，否則不會在螢幕上顯示任何東西。
若要將 datalist 與輸入欄位結合，必須在 datalist 指定一個  ID 並讓它成為 input 元素 list 屬性的值。

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
    <form action="">
        <label for="">
            捐款金額: <input type="text" list="money">
        </label>
        <datalist id="money">
            <option value="100">100</option>
            <option value="200">200</option>
            <option value="300">300</option>
        </datalist>
        <button>OK</button>
    </form>
</body>
</html>

 

輸出畫面：

1521797914029.jpg

1550211037264.jpg

 

@ 提交前提前驗證 required

required 屬性在表單中可能會被指定到零或多個表單元素
當使用者提交表單時，如果有任何需要填入資料的欄位是空白的話，瀏覽器會停止提交的動作，並顯示錯誤訊息

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
    <form action="">
        <label for="">
            name: <input type="text" required>
        </label>
        <button>OK</button>
    </form>
</body>
</html>

 

輸出畫面：

1521797914029.jpg

1550211037264.jpg

 

 

@ 自動聚焦欄位 autofocus

在 web上自動聚焦通常讓人又愛又恨。使用者如果想以方向鍵將網頁往下捲動時，網頁卻會很討厭的自動聚焦於某個欄位。在實作autofocus屬性時，請記得只可在每份文件上指定一次，以推持易用性

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
serch： <input type="serch" autofocus><br/>
<button type="submit">送出</button>
</body>
</html>

1550211037264.jpg

 

 

@ 佔位文字 placeholder

placeholder 屬性 可讓表單更能協助使用者，它的目的是提供使者額外的提示。請勿漏掉 label 元素，它是表單控制項的標題。
表單會根據目前聚焦的網頁元素，及表單欄位中是否存在資料來顯示或隱藏佔位文字：但使用者聚焦該欄位時，佔位文字就會消失。當使用者離開此欄位且欄位維持空白時，佔位文字就會出 現

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
    <form action="">
        <label>
            帳號: <input type="email" placeholder="請輸入Email">
        </label><br/>
        <label>
            手機：<input type="text" placeholder="0900-123-456">
        </label>
        <button>送出</button>
    </form>
</body>
</html>

 

輸出畫面：

Image-1.gif

1550211037264.jpg

 

@ 自動完成 autocomplete

autocomplete 屬性於1999年由 IE 引入，隨後其它瀏覽器亦加以採用，即使它不屬於任何舊版的 HTML 或 XHTML 規格。
在預設情況下，所有表單欄位的 autocomplete 都是啟用的狀態 ( ON )，你可以讓瀏覽器記憶密碼，並自動登入許多拜訪過的網站，若你將這種屬性的值指定為 off 的話，將停用這項功能
除了可以在各輸入欄位停用 autocomplete 外，也可以停用整個表單。如果以表單級別停用 autocomplete ，也可以透過設定 autocomplete ="on" 在各別欄位重新敋用它

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
    <form action="">
        <label>
            帳號: <input type="text">
        </label><br/>
        <label>
            密碼：<input type="text" autocomplete="off">
        </label>
        <button>送出</button>
    </form>
</body>
</html>

 

 

 

 

@ 限制輸入值 pattern
pattern 屬性可在輸入欄位中指定正則表達式 (正規表達式)，在輸入欄位失焦或提交表單時，以 pattern 屬性驗證使用者輸入的資料，如果結果不正確，瀏覽器會顯示錯誤訊息且不會提交。
pattern 的正則表達式語法需與 JavaScript 一樣，pattern 屬性必須匹配所有的值，否則使用者會看到錯誤訊息
使用 pattern 屬性後，也該指定 title 屬性來描述這個 pattern， title值為提交不匹配之 pattern之錯誤訊息。 Firefox 於失焦時即會判斷是否匹配 pattern 。

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
</head>
<body>
    <form action="">
        <label>
            商品編號: <input type="text" pattern="[a-zA-Z0-9]{4}-[0-9]{4}" placeholder="a123-4567" title="英數四碼-數字四碼">
        </label>
        <button>送出</button>
    </form>
</body>
</html>

 

輸出畫面：

1522404275941.jpg

1550211037264.jpg

arrow
arrow
    全站熱搜

    ksyia 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄