HTML5のformタグの使い方を詳しく解説

小云云
リリース: 2018-03-05 14:50:03
オリジナル
2551 人が閲覧しました

この記事では主に HTML5 の form タグの使用法について詳しく説明します。コード例も交えて説明します。

文法:

説明: 1. で始まり

で終わります。最後に、フォームをそれらの間に配置する必要があります。 ...

<

フォーム

  1. メソッド

    =「投稿」 アクション= 「save.php」>ラベル>

  2. <input type=「テキスト」 名前=「ユーザー名」 />

  3. <label for="pass">密コード:label >

  4. <入力 タイプ=「パスワード」 名前=「パス」 />

  5. form>

  6. テキスト入力ボックス、パスワード入力ボックス

    ユーザーが文字やデータなどを入力する必要がある場合に使用されますフォームテキスト入力ボックス、テキスト入力ボックスはパスワード入力ボックスにも変換できます

    構文:

    1. <form>

    2. < inputtype = 「テキスト/パスワード」名前 = 「名前」 = 「テキスト」 />

    3. フォーム>


    タイプがテキストの場合、テキスト入力ボックスです

    typeがpasswordの場合、パスワード入力ボックスになります

    2.name: バックエンドasp php useのテキストボックスに名前を付けます

    3.value: テキスト入力ボックスのデフォルト値を設定します(通常はプロンプト関数から開始)

    1. >

    2. <html >

    3. <head>

    4. "Content-Type" content= 「テキスト/html; charset=utf-8」 >

    5. <title>テキスト入力ボックス、パスワード入力ボックスtitle>

    6. >

    7. <>

    8. < フォーム メソッド= 「投稿」アクション=「save.php」>

    9. アカウント:

    10. <input type = "text" name = "myName" />

    11. br />

    12. 秘密コード:

    13. <入力 type = "パスワード" 名前 = "パス"/>

    14. フォーム>

    15. body>

    16. html>

    結果:

    アカウント:
    パスワード:

    テキストフィールド: 複数行のテキスト入力をサポート

    ユーザーがフォームに長いテキストを入力する必要がある場合、テキスト入力フィールドが使用されます

    構文:

    <textarea rows = 「行数」 cols = 「列数」 > text < ;/ETextarea & gt; 説明: 1. テキスト入力ドメインは & lt; textarea & gt; で始まります。 .cols: テキスト入力フィールドの列数を入力します


    4. の間にデフォルト値

    を入力します。

    1. >

    2. <html>

    3. < >

    4. meta http-equiv="Content-Type" content="text/html; charset =utf-8">

    5. <title>文メインフィールドtitle >

    6. >

    7. <>

    8. <フォーム メソッド = 「投稿」アクション = 「save.php」>

    9. <ラベル> はじめにラベル>

    10. <textarea rows = "5" cols = "10" >ここにコンテンツを入力してください... テキストエリア>スパン>

    11. < input type = 「送信」 = 「OK

    12. <input type = 「リセット」 = 「リセット」 名前 = 「リセット」 />

    13. フォーム>

      ボディ
    14. >

      html
    15. >

      詳しい説明は後ほど。 ラジオボタンやチェックボックスを使ってユーザーに選択させよう

    16. フォームを使ってアンケートを設計する場合、ユーザーの操作を軽減するために、HTMLにはラジオボタンというものがあります。ボタン ボックス 2 つの主な違いは、ラジオ ボタンではユーザーが 1 つのオプションのみを選択できるのに対し、チェック ボックスでは複数のオプションまたはすべてのオプションを選択できることです。

    1. <input type = 「ラジオ/チェックボックス」 = 「値」 名前 = 「名前」 checked = 「checked」 />

    説明:


    1. タイプ: ラジオ: コントロールシングルチェックボックス

    チェックボックス: コントロール チェック ボックス

    2. 値: サーバーにデータを提供する値

    3. 名前: バックグラウンド プログラム ASP および PHP で使用するコントロールに名前を付けます

    4.checked: 設定された場合selected = "チェック済み"、このオプションはデフォルトでチェックされています。

    1. > >

  7. <>

  8. <metahttp-equi v= 「コンテンツタイプ」 コンテンツ="text/html; charset=utf-8">

  9. <タイトル> マーキー、チェックボックス タイトル>

  10. > <

  11. 本文
  12. >

  13. <フォーム 名前 = 「iForm」 メソッド = 「投稿」 アクション = "save.php 「>

  14. 旅行は好きですか?」 <br />

  15. <input type = 「ラジオ」 名前 = 「radioLove」 = 「いいね!」 チェック済み = 「チェック済み」/>スパン>

  16. <入力 タイプ = 「ラジオ」 名前 = 「radioLove」 = 「嫌い」/>

  17. <input type = 「ラジオ」 名前 = 「radioLove」 value = 「そうではありません」どうでもいいよ」 />

  18. /> どのスポーツに興味がありますか? <br />

  19. <input type = "checkbox" name = "checkbox1" = 「ランニング」 />

  20. name = "checkbox1" value = "プレイボール" チェック済み = "チェック済み「/>

  21. <input type = "checkbox" name = "checkbox1" 価値 = 「登山」 チェック済み = "チェック済み"/>

  22. タイプ" チェックボックス「 名前 = 」チェックボックス1 "価値 = 「フィットネス」 />

  23. フォーム>

  24. ボディ>

  25. html>


結果:


旅行は好きですか?


どんなスポーツに興味がありますか?


注: 同じグループ内のラジオ ボタンが機能できるように、同じグループ内のラジオ ボタンの名前の値は一貫している必要があります。ラジオの選択の役割として。



ドロップダウン リスト ボックス

スペースを節約するには、ドロップダウン リスト ボックスを使用します。単一または複数の選択を選択できます。

単一選択:

  1. >

  2. <html>

  3. <>

  4. <メタ http-equiv="Content-Type" content="text/html; charset=utf-8"> <

    title
  5. >

    ドロップダウンページテーブルボックスtitle>

    head
  6. >

  7. <本体>

  8. <フォーム 名前 = 「iForm」 メソッド = 「投稿」 アクション = 「save.php」>

  9. < ラベル>愛し好:< ;/ラベル>

  10. <select>

    ️オプション
  11. スパン> >スポーツオプション> ;
  12. オプション> <オプション 価値 = 「旅行」>

  13. 旅行
  14. オプション&g t; ;オプション = ;ショッピング

    オプション
  15. >

  16. <スパン style="color:#ff0000;">select > >

  17. ボディ

    >

  18. html

    >
  19. 読書、スポーツ、音楽、旅行ショッピング
  20. (プルダウン可能)

    Submit value: サーバーに送信された値ですOption: 表示される値です選択されたセット= "selected" と、オプションはデフォルトで選択されます。 複数選択:

    上記の に変更し、Windows では Ctrl キーを押しながらクリックし、Mac では Command キーを押しながらクリックします
  21. データを送信するには送信ボタンを使用します

    フォームで使用できるボタンは、送信ボタンとリセットの 2 つです。ユーザーがサーバーに情報を送信する必要がある場合は、送信ボタンを使用する必要があります。

    文法:

    説明:

    1. type = "sumit"の場合のみ、ボタンはsubmit

    2.valueの機能を持ちます。ボタンに表示される単語

    リセット

    ユーザーがフォーム情報を初期状態にリセットする必要がある場合、リセットボタンを使用できます。リセットするタイプを変更するだけです。

    説明:

    1. type = "reset"の場合のみ、ボタンにはリセット機能があります

    。 2 .value: ボタン

    label label

    label label に表示されるテキストは、マウスユーザーの使いやすさを向上させるためのものではありません。つまり、ユーザーがクリックしてラベルを選択すると、ブラウザーは自動的にラベルに関連するフォーム コントロールにフォーカスを向けます (ラベルに関連付けられたフォーム コントロールが自動的に選択されます);

    構文:

    注: ラベル for 属性の値は、関連するコントロール

    id 属性値

    と同じである必要があります。

    1. <フォーム>

    2. =「男性」> 男性 ラベル> ;

    3. <input type=「ラジオ」 名前=「性別」 <スパン スタイル="color:#ff0000;">id="男性"スパン> />

    4. <br />

    5. <ラベル for=「女性」>ラベル >

    6. <入力 タイプ=「ラジオ」 名前=「性別」 < スパン スタイル= "color:#990000;">id="女性"span> />

    7. <ラベル for="メール">メールアドレスを入力してくださいラベル>

    8. <input type="email" <span style =「カラー:#ff6666;」 >id="メールアドレス"スパン>プレースホルダー="メールアドレスを入力" &gて;

    9. フォーム>


    結果:

    男性 女性
    メールアドレスを入力してください

    以下は私がコピーして確認できるものです:

    1. >

    2. < html >

    3. <> <メタ

    4. http-equiv

      = "コンテンツタイプ"content="text/html; charset=utf-8">

    5. <title> フォーム内のラベルタグ title>

    6. >

    7. <ボディ>

    8. <フォーム>

    9. 興味のあるスポーツ: <br/>

    10. <label for = "sport1">遅い跑 ラベル>

    11. <入力 タイプ = 「チェックボックス」 名前 = 「スポーツ」 id = "sport1"/> ;

    12. <br />

    13. <label for = "sport2">登山lab el>

    14. <入力 タイプ = 「チェックボックス」 名前 = 「スポーツ」 id = "スポーツ2"/> ;

    15. <br />

    16. <label for = "sport3">篮球 ラベル>

    17. <入力 タイプ = 「チェックボックス」 名前 = 「スポーツ」 id = "sport3"/> ; <br />

    18. フォーム>

    19. ボディ>

    20. html>

    結果:

    興味のあるスポーツ:
    ジョギング
    登山
    バスケットボール

    関連するおすすめ:

    フォームを動的に生成する実装メソッド

    Formフォーム要素を動的に追加するJavaScriptメソッドの例

    HTML Formフォーム要素の詳しい説明

以上がHTML5のformタグの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート