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

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

コードをコピーします コードは次のとおりです: HTML5 モバイル Web 開発ガイド 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 の新しい要素 -- フォーム要素

プレースホルダー属性: 一般にテキスト ボックスで使用されます その主な機能は、テキストボックスが未入力状態で内容が空の場合、テキスト ボックスのプロンプト コンテンツ 効果: テキスト ボックスがフォーカスを取得すると、テキスト ボックスがフォーカスを失い内容がなくなると、プロンプト情報が自動的にクリアされます。 が入力されると、プロンプト情報は再び自動的に消去されます。 onfocel および onblur イベントの助けを必要とする従来のテキスト ボックスが不要になります。 (ほとんどの PC ブラウザーおよびモバイル ブラウザーと互換性があるとしか言えません)。テクノロジーは確かに進歩しています) 例: &lt ;input type="text" placeholder="私はプレースホルダーです。リマインダーとして使用されます"> &lt ;pre> autofocus 属性: 指定されたコントロールは、変更された属性 を持つコントロールは 1 つの HTML ページ上に 1 つだけ存在できることに注意してください。 ; list 要素と datalist 要素: list 要素の主な機能はテキスト ボックスの入力を促すことであり、プロンプトのデータ ソースは datalist によって提供されます 現在、list と datalist要素は Opera ブラウザでのみサポートされており、この機能をサポートするモバイル ブラウザもありません 例: ＆lt; datalist id = "mydatalist"＆gt; ＆lt; option label = "1"＆gt; i are datalist1＆lt;/option＆gt; ＆lt; option label = "2" >私は datalist2 私は datalist3 私は datalist4 検索タイプのテキストボックス: 主に使用されるテキストボックスキーワードを検索します このテキスト ボックスと通常のテキスト ボックスの唯一の違いは、Safari と Chrome で閲覧されることです。ブラウザでは、テキスト ボックスの外観が丸くなります。 例: 電子メールの種類のテキスト ボックス: は、電子メール アドレスを入力するための入力テキスト ボックスで通常使用されます。テキスト ボックス 通常のテキスト ボックスとほぼ同じに見えますが、Safari モバイル ブラウザでは実際には異なります キーボードはテキスト ボックスの種類に応じて、対応するキーボードを表示します 例: : は数値の入力に使用されるテキスト ボックス タイプです min、max、step 属性とともに使用できます 例: 範囲タイプ テキスト ボックス: スライド入力方式を提供する数値範囲入力テキスト ボックス タイプです min、max、range およびその他の属性とともに使用する必要があります 例: 電話番号の種類テキスト ボックス: は、ユーザーが電話番号を入力するためのテキスト ボックスのタイプです モバイル ブラウザでは、このテキスト ボックスのキーボードには、テキスト ボックスのタイプに応じて対応するキーボードが表示されます 例: は、ユーザーが URL アドレスを入力するためのテキスト ボックスのタイプです モバイル ブラウザでは、このテキスト ボックスのキーボードは、テキスト ボックスのタイプに応じて対応するキーボードを表示します 例: もありますが、これらのタイプは広くサポートされていません 詳細は次のとおりです: 日付と時刻 (タイムゾーンを含む) ): 日付と時刻 (タイムゾーンを除く): 時刻選択ピッカー テキスト ボックス: 日付ピッカー テキスト ボックス: 年の週番号ピッカー テキスト ボックス : &lt ;input type="week"> 月セレクター テキスト ボックス: &lt ;/article> HTML5 の新しい要素 -- form 要素

gt;

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

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