HTMLフォーム要素

9937 ワード

白日

  • 他の要素がユーザに情報を提供するために使用される場合、フォーム要素はユーザとのインタラクションを含む.
  • 入力された情報が有効であることを確認する部分がJavaScriptの領域です.

    アクション属性

  • 動作属性は、フォームデータ(フォームデータ)をサーバに送信する際にデータが到達するURLを指定する.
  • <form action="http://server.com/join">
      <input type="text" name="test">
    </form>

    メソッドのプロパティ

  • フォームデータをサーバに送信する際に使用するHTTPメソッドを指定します.
  • <form action="" method="GET">
      <input type="text" name="test">
      <button type="submit">제출</button>
    </form>
    送信

    GET

  • GETフォームデータをURLに追加してサーバに送信します.
  • GET HTTPリクエストはブラウザによってキャッシュ(キャッシュ)される.
    💡 GETメソッドのセキュリティが悪い(入力された情報はブラウザに残っている)ため、POSTを使用して機密データを要求することをお勧めします.
  • POST

  • POSTは、フォームデータをサーバに付加する方法である.
  • POST HTTP要求はブラウザにキャッシュされないので、ブラウザ履歴にも残りません.
  • GETよりも安全です.
  • label & input

  • labelとinputは、下図に示すようにペアで使用されます.
  • label

  • label(ラベル)は、プロジェクトまたはファイルを識別するためのタイトルまたは名前です.
  • のラベルを貼ることは、ユーザが誤った情報を入力する可能性を低減するため、UXの観点からもWebアクセスの観点からも重要である.
  • input

  • ユーザが情報を入力する領域.(最も重要なラベル!)
  • 日付とファイルのアップロードを含む
  • チェックボックスと複数のタイプを使用できます.
  • fieldset & legend



    fieldset

  • フィールドセットは、Webフォーム内の複数のコントロールおよびラベルをグループ化するために使用されます.
  • legend

  • の例は、
    要素のタイトル(説明)を定義するために使用される.
  • inputプロパティ


    input type


  • ユーザ情報を受信する部分(checkbox,textなど)はほとんどinputタグを使用する.

  • text:1行の文字列を受信します.「エンタープライズ」(Enter)をクリックしてコミットします.minlengthとmaxlengthを選択できます.

  • password:パスワードのタイプを入力できます.マスクで表示します.minlengthとmaxlengthを選択できます.
    passwordはGETメソッドではなくPOSTメソッドを使用する必要があります.

  • Email:Eメール形式に合致しない場合、エラーが自動的に出力されます.モバイルユーザーの場合、Eメールにフォーカスすると、自動的に英語を入力できます.

  • tel:電話番号のタイプを入力できます.電話番号を入力するウィンドウですが、数字以外の文字に対してエラー処理が行われたことは検証されません.モバイルデバイスの場合、telにフォーカスすると、自動的に数値を入力できます.

  • number:数値のタイプを入力できます.数字以外の文字を入力し、送信ボタンを押すとエラーが表示されます.


  • range:数値のタイプを入力できます.


  • date:日付(年、月、日)のタイプを入力できます.


  • mond:日付(年、月)のタイプを入力できます.


  • time:時間のタイプを入力できます.


  • checkbox:情報のタイプを選択するには、チェックボックスを表示します.


  • radio:ラジオボタンを表示して情報のタイプを選択します.

    💡 重複選択を避けるには、同じradioタイプ名を指定する必要があります.
  • input name

  • nameプロパティは、input要素の名前を指定します.
    	<form action="/examples/media/action_target.php" method="get">
    		이름 : <input type="text" name="username"><br>
    		이메일 : <input type="email" name="useremail"><br>
      		<input type="submit">
    	</form>
  • input placeholder

  • プレースホルダ属性を使用して、入力フィールドにサンプル値または簡単な説明を表示し、ユーザーが適切な値を入力できるようにします.入力フィールドに表示され、ユーザーが入力を開始すると消えます.
  • input autocomplete

  • autocompleteプロパティは、以前に入力した値に基づいて、入力した値と似た値をオプションとして表示します.
  • input required

  • requiredプロパティフォームデータがサーバにコミットされたときに、入力されていない場合は警告メッセージが出力されます.
  • input disabled


    無効化属性
  • は、このボタンを無効にします.
  • input readonly

  • readonlyプロパティを使用すると、textarea要素のテキスト入力領域が読み取り専用になり、入力できません.
  • input step

  • input要素に入力できる数値の間隔を指定します.minプロパティとmaxプロパティを使用すると、有効な値の範囲を指定できます.
  • input min

  • input要素の最小値のプロパティを指定します.
  • input max

  • input要素の最大値のプロパティを指定します.
  • button

  • button要素は、ボタンをクリックできるように見える属性です.
  • ボタンタイプには、submit(コミット)、reset(初期化)、button(JSで定義)が含まれます.
  • select

  • ドロップダウン・メニューなど、リストから選択できるプロパティ.
  • option

  • selectプロパティに表示される各リストのプロパティを指定します.
  • optgroup

  • オプションをグループ化して表示できます.各optgroupを組み合わせることで、ドロップダウンリストをより簡単に使用できます.
  • input list & datalist

  • listは、inputで定義したオプションを含むdatalist要素です.
  • textarea

  • textareaはフォームで、複数の行長文を入力できます.