HTML 5のスマートフォーム
4445 ワード
<!doctype html>
<html>
<head></head>
<body>
<form action="http://localhost/test.php" method="post" id="register"></form>
<input type="text" name="user" value="" form="register" />
<input type="password" name="pwd" value="" form="register" />
<select name="year" form="register">
<option value="1970">1970</option>
<option value="1980">1980</option>
<option value="1990">1990</option>
</select>
<input type="submit" value=" " form="register" />
<hr />
:<input type="text" name="test" value="" pattern="\d{3}" placeholder=" HTML5 " form="register" /><br />
：<input type="email" name="youxiang" value="" form="register" required="required" /><br />
URL：<input type="url" name="url" value="" form="register" /><br />
DATE:<input type="date" name="riqi" value="" form="register" /><br />
TIME：<input type="time" name="shijian" value="" form="register" /><br />
Month：<input type="month" name="yue" value="" form="register" /><br />
WEEK：<input type="week" name="zhou" value="" form="register" /><br />
：<input type="number" name="shuzi" value="" form="register" autofocus="autofocus" /><br />
：<input type="range" name="huadong" value="" form="register" max="10" step="2" /><br />
：<input type="search" name="sousuo" value="" form="register" results="n" /><br />
：<input type="color" name="yanse" value="" form="register" /><br />
<hr />
<br />
<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option> </option>
<option> </option>
<option> </option>
</datalist>
<hr />
output<br />
<form action="" method="post" oninput="result.value=parseInt(no1.value)+parseInt(no2.value)">
<input type="number" name="no1" value="" />
<input type="number" name="no2" value="" />
<output name="result"></output>
</form>
</body>
</html>スマートフォームの使用と仕様
Type="email"
ユーザー入力を制限するにはEmailタイプが必要です
Type="url"
ユーザー入力を制限するにはURLタイプが必要です
Type="date"
ユーザー入力を日付タイプに制限
Type="time"
ユーザ入力を制限するには、時間タイプO
Type="month"
ユーザー入力を制限するには月タイプO
Type="week"
ユーザ入力を週型Oに制限する
Type="number"
ユーザー入力を制限するには、数値タイプが必要です.
Type="range"
スライドバーを作成するフォーム
Type="search"
検索の意味を持つフォームはresults=「n」属性と組み合わせて検索アイコンを表示します.
Type="color"
色選択フォームの生成
新規フォーム・プロパティ
ツールバーの
値
説明
Required
required
フォームにこの属性があることは、その内容が空ではなく、必須であることを示します.
placeholder
ヒントテキスト
フォームのプロンプトが表示されます.デフォルト値がある場合は表示されません.
Autofocus
autofocus
オートフォーカス属性、ページロード完了オートフォーカス指定フォーム
Pattern
正規表現
入力した内容は指定した正則に一致する必要があります
Autocompleteリスト
Datalistラベルとoptionラベルを組み合わせた自動記入フォーム機能:
<input type="search" name="move" list="search" >
<datalist id="search" >
<option> 1</option>
<option> 2</option>
<option> 3</option>
</datalist>
outputの使用
<form oninput="res.value=no1.value*no2.value“ >
<input type="text" name="no1">
<input type="text" name="no2">
<output name="res"></output>
</form>