HTML5_html5 チュートリアル スキルにおける新しいフォーム要素と属性の分析例

この記事では、サンプル コードを使用して、HTML5 の新しいフォーム要素と属性を示します。デモ コードには、プレースホルダー属性、オートフォーカス属性、リスト要素とデータリスト要素、検索タイプのテキスト ボックス、電子メール タイプのテキスト ボックス、数値タイプのテキスト ボックス、範囲が含まれています。 type テキスト ボックス、tel タイプ テキスト ボックス、url タイプ テキスト ボックス、および日付、時刻タイプの入力要素など。
サンプルコードは次のとおりです:

コードをコピーします

コードは次のとおりです:

h1、h2、h3、h4、h5、h6
{
text-align：center;
}

input
{
幅：450px;
}

input [type = "range"]
{
-webkit-appearance：なし！ 0 0px＃424242、0 1px 0＃060607 inset、
0px 2px 10px 0pxブラックインセット、1px 0px 2px rgba（0、0、0、0.4）挿入図、0.6）inset;
マージントップ：2px;
背景色：＃272728;
border-radius：15px;
width：400px;
}

/*-webkit-slider-thumb: 上記のスライダーのスタイルを設定します*/
input[type="range"]::-webkit-slider-thumb
{
-webkit-Appearance: none !重要;
カーソル: デフォルト;
上部: 1px;
高さ: 9px;
幅: 20px;
背景: なし スクロールを繰り返す 0 0 #777;
境界半径：15px;
-webkit -box -shadow：0 -1px 1px black inset;
}
＆lt;/style＆gt;


＆lt; Header＆gt;
＆lt;セクション>

HTML5 モバイル ウェブ開発ガイド

セクション>


;HTML5 の新しい要素 -- フォーム要素

 プレースホルダー属性: <br> 一般にテキスト ボックスで使用されます <br> その主な機能は、テキストボックスが未入力状態で内容が空の場合、テキスト ボックスのプロンプト コンテンツ <br> 効果: <br> テキスト ボックスがフォーカスを取得すると、テキスト ボックスがフォーカスを失い内容がなくなると、プロンプト情報が自動的にクリアされます。 <br> が入力されると、プロンプト情報は再び自動的に消去されます。<br> onfocel および onblur イベントの助けを必要とする従来のテキスト ボックスが不要になります。<br> (ほとんどの PC ブラウザーおよびモバイル ブラウザーと互換性があるとしか言えません)。テクノロジーは確かに進歩しています) <br> 例: &lt ;input type="text" placeholder="私はプレースホルダーです。リマインダーとして使用されます"><br> 

< ;pre> autofocus 属性:
指定されたコントロールは、変更された属性
を持つコントロールは 1 つの HTML ページ上に 1 つだけ存在できることに注意してください。

;

 list 要素と datalist 要素: <br> list 要素の主な機能はテキスト ボックスの入力を促すことであり、プロンプトのデータ ソースは datalist によって提供されます <br> 現在、list と datalist要素は Opera ブラウザでのみサポートされており、この機能をサポートするモバイル ブラウザもありません <br> 例: <input type="text" placeholder="list 属性と datalist 要素を追加しましたが、理解できる人が多くありません" list="mydatalist">＆lt; datalist id = "mydatalist"＆gt;<br>＆lt; option label = "1"＆gt; i are datalist1＆lt;/option＆gt; <br>＆lt; option label = "2" >私は datalist2<br> <option label="3"> 私は datalist3</option><br> <option label="4">私は datalist4</option><br> <br> 

> ;

 検索タイプのテキストボックス: <br> 主に使用されるテキストボックスキーワードを検索します<br> このテキスト ボックスと通常のテキスト ボックスの唯一の違いは、Safari と Chrome で閲覧されることです。ブラウザでは、テキスト ボックスの外観が丸くなります。<br> 例: <input type="search" placeholder="検索タイプのテキスト ボックスです"><br> 

> ;

 電子メールの種類のテキスト ボックス: <br> は、電子メール アドレスを入力するための入力テキスト ボックスで通常使用されます。テキスト ボックス 通常のテキスト ボックスとほぼ同じに見えますが、Safari モバイル ブラウザでは実際には異なります <br> キーボードはテキスト ボックスの種類に応じて、対応するキーボードを表示します <br> 例: <input type="email" placeholder="私は電子メール タイプのテキスト ボックスです"><br> 

 : <br> は数値の入力に使用されるテキスト ボックス タイプです <br> min、max、step 属性とともに使用できます <br> 例: <input type="number" value="0" min=" 0 " max="10" step="1"><br> 

 範囲タイプ テキスト ボックス:<br> スライド入力方式を提供する数値範囲入力テキスト ボックス タイプです <br> min、max、range およびその他の属性とともに使用する必要があります <br> 例: <input type="range" value=" 1 " min="0" max="100" step="1"><br> 

 電話番号の種類テキスト ボックス: <br> は、ユーザーが電話番号を入力するためのテキスト ボックスのタイプです <br> モバイル ブラウザでは、このテキスト ボックスのキーボードには、テキスト ボックスのタイプに応じて対応するキーボードが表示されます <br> 例: <br> 

は、ユーザーが URL アドレスを入力するためのテキスト ボックスのタイプです
モバイル ブラウザでは、このテキスト ボックスのキーボードは、テキスト ボックスのタイプに応じて対応するキーボードを表示します
例:

もありますが、これらのタイプは広くサポートされていません
詳細は次のとおりです:
日付と時刻 (タイムゾーンを含む) ):

日付と時刻 (タイムゾーンを除く):

時刻選択ピッカー テキスト ボックス:

日付ピッカー テキスト ボックス:

年の週番号ピッカー テキスト ボックス :
< ;input type="week">
月セレクター テキスト ボックス:


セクション>
< ;/article>

HTML5 の新しい要素 -- form 要素

> ;