HTML5には、さまざまな入力ボックスとボタンがあります。さらに、HTML5は選択リスト、マルチライン入力ボックスなどをサポートしています。属性は次のとおりです。
単一のテキスト入力ボックスタイプは、入力要素が単一のラインテキストボックスであるというテキストであり、入力要素のデフォルトの表示です。単一のテキスト入力ボックスは、次の属性設定をサポートしています。
要素サイズを設定しますMaxLength属性は、ユーザーが入力できる最大数の文字を設定します。
<form method = post action = http：// titan：8080/form> <p> <label for = name> name：<入力maxlenth = 10 id = name = name =>> </p> </p> p > <label for = city> city：<入力サイズ= 10 id = city name = city/> </p> <p> <ラベル= fave>フルーツ：<入力サイズ= 10 maxlenth = 10 10 id = fave name = fave/> </label> </p> <button type =送信>投票</button> </form>初期値を設定し、場所を占有するプロンプトを設定します
値属性は、入力ボックスのデフォルト値を指定できます。
<form method = post action = http：// titan：8080/form> <p> <label for = name> name> <input placeholder = your name name/>> </p> <p> <p> <label for = city> city：<入力プレースホルダー=住んでいる場所id = city name = city/> </p> <p> <ラベル= fave> fave> <input value = apple id = fave name = fave/ > </label> </p> <ボタンタイプ=送信>投票</button> </form>
Chromeの効果は次のとおりです。
フォームをボタン要素でリセットすると、ブラウザはテキストボックスのポジショニングプロンプトとデフォルト値を復元します。
データのリストList属性は、DataList要素のID属性値に設定でき、ユーザーはDatalist要素で指定されたリストで選択できます。 Datalist要素は、HTML5に新たに追加され、ユーザーが必要なデータを入力できるように値のバッチを提供します。
<form method = post action = http：// titan：8080/form> <p> <label for = name> name> <input placeholder = your name name/>> </p> <p> <p> <label for = city> city：<入力プレースホルダー=住んでいる場所id = city name = city/> </p> <p> <ラベル= fave> st id = fave name = fave/> </label> < /p> <ボタンタイプ=送信>投票を送信</button> </form> <datalist id = furtlist> <option value = apples label = lowich a pples/> <option value = oranges> refhing oranges </option> <オプション値= cherries/> </datalist>
DataList要素の各オプションは、ユーザーが選択できる値を表します。
読み取り専用または無効になっているテキストボックスを生成しますreadonly属性は、テキストボックスが読み取られていることを示し、無効な属性は編集できないことを示し、外観のパフォーマンスに違いがあります。
<form method = post action = http：// titan：8080/form> <p> <label for = name> name：<input value = adam disabled id = name name/> </p> <p> <p> <label for = city> city：<入力値=ボストンreadonly id = city name = city/> </p> <p> <ラベル= fave>フルーツ：<入力値= apple id = fave name = fave/>> </label> </p> <ボタンタイプ=送信>投票</button> </form>
Chromeの効果は次のとおりです。
無効化されたプロパティを備えたフォームは、その中のテキストを編集できません。ボックスですが、外観に影響には影響しないため、コンテンツはサーバーに送信されます。
パスワード入力ボックス型属性の入力要素は、パスワードを使用してパスワードを入力します。この属性の入力要素は、次の属性をサポートします。
1）最大長：ユーザーがパスワードボックスに入力できる文字の最大数。
2）パターン：検証の正規表現を入力するために使用されます。
3）プレースホルダー：必要なデータ型についてプロンプト。
4）Readonly：パスワードボックスを読み取り専用に設定します。
5）必須：ユーザーは値を入力する必要があります。そうしないと、入力検証を渡すことができません。
6）サイズ：指定されたパスワードボックスに表示される文字の数に幅を設定します。
7）値：初期パスワード値を設定します。
<form method = post action = http：// titan：8080/form> <p> <label for = name> name：<input value = adam disabled id = name name/> </p> <p> <ラベルのラベル=パスワード>パスワード：<入力タイプ=パスワードプレースホルダー= min 6文字=パスワード=パスワード=パスワード=パスワード=パスワード=パスワード/</p> <p> <p> <p> <ラベル= fave>フルーツ：<入力値=リンゴid =お気に入りの名前= fave/ </label> </p> <ボタンタイプ=送信>投票</button> </form>
ユーザーが入力した文字は、パスワードボックスに*表示されますが、フォームを送信すると、サーバーが安全であることが重要なウェブサイトとアプリケーションシステムが受信されることに注意してください。 SSL/HTTPSをブラウザに使用することを検討し、サーバー間の通信コンテンツが暗号化されています。
ボタンTypeプロパティは、送信、リセット、およびボタンのようにボタンのようなボタンを生成するように設定されています。
1）送信：フォームを送信するボタン、サポート属性：Formaction、FormEnctype、FormTarget、およびFormNovalidateは、ボタン要素の同じ名前属性と同じです。
2）リセット：固定フォームのボタンを生成します。
3）ボタン：操作なしで通常のボタンを生成します。
3のボタンの説明テキストは、値属性を介して指定されています。
<form method = post action = http：// titan：8080/form> <p> <label for = name> name：<input value = adam disabled id = name name/> </p> <p> <ラベルのラベル=パスワード>パスワード：<入力タイプ=パスワードプレースホルダー= min 6文字=パスワード=パスワード=パスワード=パスワード=パスワード=パスワード/</p> <p> <p> <p> <ラベル= fave>フルーツ：<入力値=リンゴid =お気に入りの名前= fave/ </label> </p> <input type = submit value = submit hote/> <input intyp = reset value = resype = b utton value = my button/> </form>
Chromeの効果は次のとおりです。
生成ボタンとAnput要素を使用してボタン要素を使用する違いは、後者を使用してテキストを含むテキストを表示できることです。ただし、各ブラウザには入力要素の処理方法が同じであり、一部の古いブラウザー（IE6など）がボタン要素を適切に処理できないため、多くのWebサイトは入力要素を使用する傾向があります。
制限付き入力ボックスデジタル入力ボックス型属性の入力要素は値のみを受け入れます。サポート属性は次のとおりです。
1）リスト：テキストボックスに推奨される値を提供するDatalist要素を指定し、その値はDatalist要素のID値です。
2）最小：最小値を設定します。
3）最大：最大値を設定します。
4）Readonly：読み取り専用。
5）必須：ユーザーが値を入力する必要があることを意味します。
6）ステップ：値を上下に調整するステップ。
7）値：指定された要素の初期値。
<form method = post action = http：// titan：8080/form> <p> <label for = name> name：<input value = adam disabled id = name name/> </p> <p> <ラベルのラベル=パスワード>パスワード：<入力タイプ=パスワードプレースホルダー= min 6文字=パスワード=パスワード=パスワード=パスワード=パスワード=パスワード/</p> <p> <p> <p> <ラベル= fave>フルーツ：<入力値=リンゴid =お気に入りの名前= fave/ > </label> </p> <p> <ラベルのラベル=価格>お住まいの地域のユニットあたり：<入力タイプ=番号ステップ= 1分= 0 max = 1 id = id =価格=価格=価格/> </label> </p> <入力タイプ=送信値=投票/> </form>
Chromeの効果は次のとおりです。
範囲セレクタータイプの範囲を持つ入力要素を使用すると、ユーザーは最初に指定されたスコープ内で数値を選択するためにのみ使用できます。
<form method = post action = http：// titan：8080/form> <p> <label for = name> name：<input value = adam disabled id = name name/> </p> <p> <ラベルのラベル=パスワード>パスワード：<入力タイプ=パスワードプレースホルダー= min 6文字=パスワード=パスワード=パスワード=パスワード=パスワード=パスワード/</p> <p> <p> <p> <ラベル= fave>フルーツ：<入力値=リンゴid =お気に入りの名前= fave/ </label> </p> <p> <ラベルのラベル=価格>お住まいの地域のユニットあたり$：1 <入力タイプ=範囲ステップ= 1分= 0 max = 1 100 value = 1 id =価格名=価格/100 </label> </p> <入力タイプ=送信値=投票/> </form>
Chromeの効果は次のとおりです。
チェックボックスタイプ属性は、サポート属性を表すチェックボックスです。
1）チェック：デフォルトで選択するかどうか。
2）必須：ユーザーがチェックボックスをチェックする必要があることを示します。
3）値：デフォルトのサーバーに送信されたデータ値を設定します。
<form method = post action = http：// titan：8080/form> <p> <label for = name> name：<input value = adam disabled id = name name/> </p> <p> <ラベルのラベル=パスワード>パスワード：<入力タイプ=パスワードプレースホルダー= min 6文字=パスワード=パスワード=パスワード=パスワード=パスワード=パスワード/</p> <p> <p> <p> <ラベル= fave>フルーツ：<入力値=リンゴid =お気に入りの名前= fave/ </label> </p> <p> <ラベルのラベル= veggie>あなたは菜食主義者ですか：<入力タイプ=チェックボックスId = veggie = veggie/> veg etarian </label> </p> <入力型=送信値=投票/> </form>を送信します
Chromeの効果は次のとおりです。
チェックボックスを使用すると、チェックボックスが送信された場合にのみ、チェックボックスがサーバーに送信されることに注意してください。
単一の選択ボタングループタイプ属性の入力要素を使用して、一連のシングル選択ボタンを生成できます。各無線はオプションを表し、同じラジオグループが同じ名前を使用します。単一の選択ボタングループは、オプションが少ないシーンに適しています。
<form method = post action = http：// titan：8080/form> <p> <label for = name> name：<input value = adam disabled id = name name/> </p> <p> <ラベルのラベル=パスワード>パスワード>パスワード：<入力タイプ=パスワードプレースホルダー= min 6文字=パスワード=パスワード=パスワード/> </p> <p> d>お気に入りのフルーツの投票</legend> <ラベル= apples> <入力タイプ=ラジオチェック値=リンゴid = apples name = fave/> apples </label> <label for = orange> <input type = radio value = oranges id = orange name = fave/> orange </label> <label for = cherries > <入力タイプ=無線値= cherries id = cherries name = fave/> </label> </fieldset> </p> <入力タイプ= value = submit投票/> </form>
Chromeの効果は次のとおりです。
限られたフォーマット入力ボックス属性値の電子メール、Tel、およびURLは、それぞれサポートされている属性が含まれます。
1）リスト：テキストボックスに推奨される値を提供するDatalist要素を指定し、その値はDatalist要素のID値です。
2）最大長：入力文字の最大数。
3）パターン：入力を確認するための正規表現を指定します。
4）プレースホルダー：必要なデータ型にプロンプトを指定します。
5）Readonly：テキストボックスを読み取り、読み取り専用。
6）必須：ユーザーが値を入力する必要があることを示します。
7）サイズ：可視数文字数。
8）値：指定された要素の初期値。
電子メールは複数の属性もサポートしており、複数の電子メールアドレスを受け入れることができることを示しています。
<form method = post action = http：// titan：8080/form> <p> <label for = name> name：<input value = adam disabled id = name name/> </p> <p> <ラベルのラベル=パスワード>パスワード>パスワード：<入力タイプ=パスワードプレースホルダー= min 6文字=パスワード名=パスワード=パスワード=パスワード=パスワード/> </p> <p> <label = email = email> email：<入力タイプ=電子メール[email protected] id = email name = email/> </p> <p> <p> <ラベルfor = tel> tel> tel：<入力タイプ= Tel Placeholder =（xxx）-xxx- xxxx id = tel name = tel/> </ラベル> </p> <p> <ラベル= url>ホームページ：<入力タイプ= url id = url name = url/> </p> <入力タイプ= value = submit投票/> </form>
Chromeの効果は次のとおりです。
日付と日付の入力ボックス以下を含む、いくつかのタイプの入力日と時刻がHTML5に追加されます。
1）DateTime：タイムゾーン情報を含む世界の日付と時刻を取得します。
2）DateTime-Local：ローカルの日付と時刻を取得し、タイムゾーン情報は含まれません。
3）日付：時間とタイムゾーンの情報なしで、現地の日付を取得します。
4）月：日、時間、およびタイムゾーン情報なしで、年次および毎月の情報を取得します。
5）時間：時間を取得します。
6）週：今週を取得します。
日付と時刻の入力要素によってサポートされる追加の属性は次のとおりです。
1）リスト：テキストボックスに推奨される値を提供するDatalist要素を指定し、その値はDatalist要素のID値です。
2）最小：最小値を設定します。
3）最大：最大値を設定します。
4）Readonly：読み取り専用。
5）必須：ユーザーは値を入力する必要があります。そうしないと、入力検証を渡すことができません。
6）ステップ：値を上下に調整するステップ。
7）値：指定された要素の初期値。
<form method = post action = http：// titan：8080/form> <p> <label for = name> name：<input value = adam disabled id = name name/> </p> <p> <ラベルのラベル=パスワード>パスワード：<入力タイプ=パスワードプレースホルダー= min 6文字=パスワード=パスワード=パスワード=パスワード=パスワード=パスワード/</p> <p> <p> <p> <ラベル= fave>フルーツ：<入力値=リンゴid =お気に入りの名前= fave/ > </label> </p> <p> <label for = lastBuy>最後に購入した時期：<入力タイプ=日付id = lastbuy name = lastbuy/> </label> </p> <入力タイプ=送信値=投票/> </form>を送信します
Chromeの効果は次のとおりです。
現在、日付と時刻の入力ボックスは、ほとんどのブラウザでは十分にサポートされていません。
カラー入力ボックスタイプ属性はカラーセレクションであり、色の値は7文字の形式で表されます：＃から始まり、次の3つの2つの16の進歩は、赤、緑、青の3つの主要な色の値を表します。 、＃FF1234など、赤、緑、青の3つの主要な色の値など、赤、緑、青の値など。
<form method = post action = http：// titan：8080/form> <p> <label for = name> name：<input value = adam disabled id = name name/> </p> <p> <ラベルのラベル=パスワード>パスワード：<入力タイプ=パスワードプレースホルダー= min 6文字=パスワード=パスワード=パスワード=パスワード=パスワード=パスワード/</p> <p> <p> <p> <ラベル= fave>フルーツ：<入力値=リンゴid =お気に入りの名前= fave/ </label> </p> <p> <label = color> <入力タイプ=色=> </p> </p。 /form>
Chromeの効果は次のとおりです。
ほとんどのブラウザは、この入力要素に特別なサポートを提供していないことに注意してください。
非表示の入力ボックスHidden -Type入力要素を使用して、データ項目を非表示にして、フォームを送信するときにサーバーに送信できます（通常、この関数を使用するため）。
<form method = post action = http：// titan：8080/form> <入力タイプ=隠された名前= RecordID値= 1234/<P> <ラベル=名前>名前：<入力値= ADAM無効ID =名前name = name/> </label> </p> <p> <ラベル=パスワード>パスワード>パスワード>パスワード> <入力タイプ=パスワードプレースホルダー= min 6 Charals id = password/> </lab el> </p> < p> <p> <ラベル= fave>フルーツ：<入力値=リンゴid = fave name = fave/> </p> </p> <入力タイプ=送信=投票/> </form>画像ボタン
画像タイプの入力要素によって生成されたボタンはアイコンとして表示され、[]をクリックした後にフォームが送信されます。サポート属性は次のとおりです。
1）ALT：要素の説明テキストを提供します。これは、障害のある支援技術を使用する必要があるユーザーに役立ちます。
2）形式：同じボタン要素。
3）formeenctype：同じボタン要素。
4）formmethod：同じボタン要素。
5）formTarget：同じボタン要素。
6）formnovalidate：同じボタン要素。
7）高さ：画像の高さをピクセルで設定します。
8）SRC：表示する画像のURLを指定します。
9）幅：ピクセル内の画像の幅を設定します。
<form method = post action = http：// titan：8080/form> <入力タイプ=隠された名前= RecordID値= 1234/<P> <ラベル=名前>名前：<入力値= ADAM無効ID =名前name = name/> </label> </p> <p> <ラベル=パスワード>パスワード>パスワード>パスワード> <入力タイプ=パスワードプレースホルダー= min 6 Charals id = password/> </lab el> </p> < p> <p> <ラベル= fave>フルーツ：<入力値=リンゴid = fave name = fave/> </p> </p> <入力タイプ= image src = compated.png name = submit/> < /形状 "
[画像]ボタンをクリックして、送信されたデータには、クリック位置の座標情報が含まれています。
[ファイル]ボタンをアップロードしますファイルタイプの入力要素はファイルをアップロードするために使用され、フォームを送信するときにファイルをサーバーにアップロードできます。サポート属性は次のとおりです。
1）受け入れ：受け入れの種類を指定します。 MIMEタイプの定義、RFC 2046（http://tools.ies.org/html/rfc2046）を参照してください。
2）複数：この属性を設定して、一度に複数のファイルをアップロードします。
3）必須：ユーザーは値を入力する必要があります。
<form method = post action = http：// titan：8080/form enctype = multipart/form-data> <p> <label for = name> name：<input value = adam disabled id = name na me = name/>> </label> </p> <p> <ラベル=パスワード>パスワード>パスワード>パスワード>パスワード> <入力タイプ=パスワードプラント= min 6文字=パスワード=パスワード=パスワード=パスワード=> </p> <p> <lab el for = fave>フルーツ：<入力値=リンゴid = fave name = fave/> </p> <p> <入力タイプ=ファイルname = filedata/> </p> <入力タイプ=送信値=投票/> </form >
MultiPart/Form-Dataをアップロードできる場合、フォームコードタイプをアップロードできることに注意してください。 Chromeの効果は次のとおりです。
オプションリストSELET要素は、Radiiiiobuttonタイプの入力要素よりもコンパクトであり、より多くのオプションを備えた状況に適したオプションのリストを生成するために使用されます。この要素でサポートされる属性には、次のものが含まれます。
1）名前：リストの名前。
2）無効：ドロップダウンリストを無効にします。
3）フォーム：テキスト領域に属する1つ以上のフォーム。
4）オートフォーカス：ページがロードされた後、テキスト領域は自動的にフォーカスを取得します。
5）必須：埋める必要があります。
6）サイズ：オプションの数は、ドロップダウンリストに表示されます。
7）複数：複数のオプションを選択できます。
シングルドロップダウンリスト[要素の選択]デフォルトは単一のセレクションドロップダウンリストです
<form method = post action = http：// titan：8080/form enctype = multipart/form-data> <p> <label for = name> name：<input value = adam disabled id = name na me = name/>> </label> </p> <p> <ラベル=パスワード>パスワード>パスワード>パスワード>パスワード> <入力タイプ=パスワードプラント= min 6文字=パスワード=パスワード=パスワード=パスワード=> </p> <p> <lab el for = fave>お気に入りの果物：<選択id = fave name = fave> <option value = apples selected label = apples> apples </option> <option value = orange = orange> oranges </option> <option value = cherries labe = cherries> cherries </option> <option value = pears labels> pears> pears> </option> </select> </p> <入力タイプ=送信値=投票/> m>
Chromeの効果は次のとおりです。
チェックボックスリストのサイズ属性と複数の属性を設定した後、チェックボックスになります。
<form method = post action = http：// titan：8080/form enctype = multipart/form-data> <p> <label for = name> name：<input value = adam disabled id = name na me = name/>> </label> </p> <p> <ラベル=パスワード>パスワード>パスワード>パスワード>パスワード> <入力タイプ=パスワードプラント= min 6文字=パスワード=パスワード=パスワード=パスワード=> </p> <p> <lab el for = fave>お気に入りの果物：<select id = fave name = fave size = 5倍数> <option値=リンゴselectd label = apples> apples </option> <option> es label = orange> option> <option value = cherries label = cherries> cherries </option> <option value = pears label = pears> pears> option> </select> </p> <入力タイプ=送信値=投票/> </form>
[オプション]をクリックすると、CTRLキーを押して複数のオプションを選択します。 Chromeの効果は次のとおりです。
構造のリストオプトグループ要素を使用して、選択した要素のコンテンツに特定の構造を確立できます。
1）ラベル：オプションのセット全体に小さなタイトルを提供するために使用されます。
2）無効：グループ内のグループのオプション。
<form method = post action = http：// titan：8080/form enctype = multipart/form-data> <p> <label for = name> name：<input value = adam disabled id = name na me = name/>> </label> </p> <p> <ラベル=パスワード>パスワード>パスワード>パスワード>パスワード> <入力タイプ=パスワードプラント= min 6文字=パスワード=パスワード=パスワード=パスワード=> </p> <p> <lab el for = fave>お気に入りの果物：<選択ID = fave name = fave> <optgroup label = top choices> <option value = apples selected label = apples> option> ion value = oranges label = oranges> option </option> </optgroup > <OptGroup Label =その他> <オプションValu = Cherries Label = Cherries> Cherries> option> <option Value = pears labels> pears> tgroup> </select> </label> </p> <入力型=送信値=投票/> </form>を送信します
Chromeの効果は次のとおりです。
OptGroup Elementsは組織的な役割のみを果たし、ユーザーはオプションとして選択することはできません。
マルチライン入力ボックスTextarea要素はマルチラインテキストボックスを生成し、ユーザーはマルチラインテキストを入力できます。属性を含む。
1）オートフォーカス：ページがロードされた後、テキスト領域は自動的にフォーカスを取得します。
2）cols：可視幅、整数。
3）無効：このテキスト領域を無効にします。
4）フォーム：テキスト領域に属する1つ以上のフォーム。
5）最大長：テキスト領域の文字の最大数。
6）名前：テキスト領域の名前。
7）プレースホルダー：テキスト領域の期待値を短くリマインダー。
8）Readonly：テキスト領域は読み取り専用です。
9）必須：テキスト領域が必要です。
10）行：テキスト領域の可視線の数、整数。
11）テキスト領域のテキストを変更する方法：ソフト（デフォルト）。
<form method = post action = http：// titan：8080/form enctype = multipart/form-data> <p> <label for = name> name：<input value = adam disabled id = name na me = name/>> </label> </p> <p> <ラベル=パスワード>パスワード>パスワード>パスワード>パスワード> <入力タイプ=パスワードプラント= min 6文字=パスワード=パスワード=パスワード=パスワード=> </p> <p> <lab el for = fave>お気に入りの果物：<選択ID = fave name = fave> <optgroup label = top choices> <option value = apples selected label = apples> option> ion value = oranges label = oranges> option </option> </optgroup > <OptGroup Label =その他> <オプションValu = Cherries Label = Cherries> Cherries> option> <option Value = pears labels> pears> tgroup> </select> </label> </p> < P> <Textarea cols = 20 rows = 5 wrap = hard id = story name = story>これがあなたのお気に入りである理由を教えてください</textarea> </p> <入力タイプ= va lue = submit yot/>> </form >
Chromeの効果は次のとおりです。
結果は領域を表示します出力要素は、計算の結果を表します。サポート属性は次のとおりです。
1）：出力ドメインに関連する1つ以上の要素、中央の空間で分離。
2）フォーム：入力フィールドの1つ以上のフォーム。
3）名前：オブジェクトの唯一の名前（フォームが送信されたときに使用）。
<form onsubmit = return false onput = res.value = Quant.ValueasNumber * price.valueasnumber> <fieldset> <fieldset> <fieldset> <fieldset> <calculator </legent> t type = number placeholder =数量id = Quant name = Quant/> <入力タイプタイプ= number Placeholder = rice id = rice name = price/> = <output for = Quant name = res/> </form>
JavaScriptの時間システムは、Chromeの効果を生成するために使用されます。
上記は、この記事のすべての内容です。