36.HTML フォームの入力属性について

  • 投稿者:
  • 投稿コメント:0件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2022年3月31日
この記事の概要
  1. value属性
  2. 読み取り専用属性
  3. 無効化された属性
  4. サイズ属性
  5. maxlength属性
  6. HTML5 属性
  7. オートコンプリート属性
  8. novalidate属性e
  9. オートフォーカス属性
  10. フォーム属性
  11. formaction属性
  12. formenctype属性
  13. formmethod属性
  14. formnovalidate属性
  15. formtarget属性
  16. 高さと幅の属性
  17. list属性
  18. 最小および最大属性
  19. 複数の属性
  20. パターン属性
  21. プレースホルダー属性
  22. 必須の属性
  23. ステップ属性

value属性

value 属性は、入力フィールドの初期値を指定します。

例文

<form action=””>
 
First name:<br>
  <input type=”text” name=”firstname”
value=”John”>
</form>

読み取り専用属性

readonly 属性は、入力フィールドが読み取り専用であることを指定します（変更することはできません）

例文

<form action=””>
 
First name:<br>
  <input type=”text” name=”firstname”
value=”John” readonly>
</form>
スポンサーリンク

無効化された属性

disabled 属性は、入力フィールドが無効になっていることを指定します。

無効化された入力フィールドは使用不可能でクリック不可能であり、その値はフォーム送信時に送信されません。

例文

<form action=””>
 
First name:<br>
  <input type=”text” name=”firstname”
value=”John” disabled>
</form>

サイズ属性

size 属性は、入力フィールドの（文字数）のサイズを指定します。

例文

<form action=””>
 
First name:<br>
  <input type=”text” name=”firstname”
value=”John” size=”40″>
</form>
スポンサーリンク

maxlength属性

maxlength 属性は、入力フィールドの最大長を指定します。

例文

<form action=””>
 
First name:<br>
  <input type=”text” name=”firstname”
maxlength=”10″>
</form>

maxlength 属性、入力フィールドは、文字の許可された数より多くを受け入れることはありません。

maxlength 属性には、任意のフィードバックを提供していません。ユーザーに警告したい場合は、JavaScriptコードを書く必要があります。

ノート: 入力制限は絶対確実なものではなく、JavaScriptは違法な入力を追加するための多くの方法を提供します。安全に入力を制限するためには、受信側（サーバー）によってもチェックされなければなりません。

HTML5 属性

HTML5は以下の <input>属性を追加されます

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

<form>オートフォーカス

  • autocomplete
  • novalidate
スポンサーリンク

オートコンプリート属性

この autocomplete属性は、フォームまたは入力フィールドのオートコンプリートをオンにするかオフにするかを指定します。

オートコンプリートがオンの場合、ブラウザはユーザーが以前に入力した値に基づいて入力値を自動的に補完します。

ヒント: フォームの場合は “on” 特定の入力フィールドの場合は “off” あるいはその逆の場合にオートコンプリートを使用することができます。

この autocomplete 属性は、text、search、url、tel、email、password、datepickers、range、color<form> の各 <input>タイプで動作します。

例文

オートコンプリートがオン（および1つの入力フィールドに対してオフ）のHTMLフォーム

<form action=”/action_page.php” autocomplete=”on”>
 
First name:<input type=”text” name=”fname”><br>
 
Last name: <input type=”text” name=”lname”><br>
 
E-mail: <input type=”email” name=”email” autocomplete=”off”><br>
 
<input type=”submit”>
</form>

ヒント: ブラウザによっては、これを機能させるためにオートコンプリート機能を有効にする必要があるかもしれません。

novalidate属性e

novalidate 属性がある<form> 属性

存在する場合、novalidateは送信時にフォームデータを検証しないように指定します。

例文

フォームが送信時に検証されないことを示します。

<form action=”/action_page.php” novalidate>
 
E-mail: <input type=”email” name=”user_email”>
 
<input type=”submit”>
</form>

スポンサーリンク

オートフォーカス属性

autofocus 属性は、ページがロードされたときに入力フィールドが自動的にフォーカスを取得するように指定します。

例文

ページがロードされたときに”First name” 入力フィールドが自動的にフォーカスされるようにします。

First name:<input type=”text” name=”fname”
autofocus>

フォーム属性

form 属性には、一の以上のフォームを指定する <input> 要素が属しています。

ヒント: 複数のフォームを参照するには、スペースで区切られたフォームIDのリストを使用してください。

例文

HTMLフォームの外側（ただしフォームの一部）にある入力フィールド：

<form action=”/action_page.php” id=”form1″>
 
First name: <input type=”text” name=”fname”><br>
 
<input type=”submit” value=”Submit”>
</form>

Last name: <input type=”text” name=”lname” form=”form1″>

スポンサーリンク

formaction属性

formaction 属性は、フォームが送信されたときに入力コントロールを処理するファイルのURLを指定します。

formaction属性は、 <form> 要素のaction属性をオーバーライドします。

formaction属性は、 type="submit" と type="image"共に使用されます

例文

アクションが異なる2つの送信ボタンを持つHTMLフォーム。

<form action=”/action_page.php”>
 
First name: <input type=”text” name=”fname”><br>
 
Last name: <input type=”text” name=”lname”><br>
 
<input type=”submit” value=”Submit”><br>
 
<input type=”submit” formaction=”/action_page2.php”
  value=”Submit as admin”>
</form>

formenctype属性

formenctype 属性は、送信時のフォームデータのエンコード方法を指定します（method =”post”のフォームの場合のみ）。

formenctype 属性はe <form> をenctype属性よりも優先します。

formenctype 属性は type="submit" と type="image"一緒に使用されます。

例文

デフォルトでエンコードされ（最初の送信ボタン）、 “multipart / form-data”（2番目の送信ボタン）としてエンコードされたフォームデータを送信します。

<form action=”/action_page_binary.asp” method=”post”>
 
First name: <input type=”text” name=”fname”><br>
 
<input type=”submit” value=”Submit”>
 
<input type=”submit” formenctype=”multipart/form-data”
  value=”Submit as Multipart/form-data”>
</form>

スポンサーリンク

formmethod属性

formmethod 属性は、フォームデータをアクションURLに送信するためのHTTPメソッドを定義します。

formmethod 属性は <form> 要素のmethod属性をオーバーライドします。

formmethod 属性は type="submit" と type="image"を一緒に使用することができます。

例文

2番目の送信ボタンは、次の形式のHTTPメソッドをオーバーライドします。

<form action=”/action_page.php” method=”get”>
 
First name: <input type=”text” name=”fname”><br>
 
Last name: <input type=”text” name=”lname”><br>
 
<input type=”submit” value=”Submit”>
 
<input type=”submit” formmethod=”post” value=”Submit using POST”>
</form>

formnovalidate属性

formnovalidate 属性は、 <form> 要素のnovalidate属性をオーバーライドします。
オーバーライドとは、スーパクラスから継承されたサブクラスにおいて、メンバ関数を独自の機能で上書きすることです。

formnovalidate は type="submit"と共に使用できます

例文

2つの送信ボタンを持つフォーム（検証ありとなし）

<form action=”/action_page.php”>
 
E-mail: <input type=”email” name=”userid”><br>
 
<input type=”submit” value=”Submit”><br>
 
<input type=”submit” formnovalidate value=”Submit without validation”>
</form>
スポンサーリンク

formtarget属性

formtarget属性は、フォームの送信後に受信した応答をどこに表示するかを示す名前またはキーワードを指定します。

formtarget属性は <form> をターゲット属性よりも優先されます

formtarget 属性は type="submit" と type="image"一緒に使用することができます

例文

ターゲットウィンドウが異なる2つの送信ボタンを持つフォーム。

<form action=”/action_page.php”>
 
First name: <input type=”text” name=”fname”><br>
 
Last name: <input type=”text” name=”lname”><br>
 
<input type=”submit” value=”Submit as normal”>
  <input type=”submit” formtarget=”_blank”
  value=”Submit to a new window”>
</form>

高さと幅の属性

height と width と <input
type="image"> で属性の高さと幅を指定できます

常に画像のサイズを指定してください。ブラウザがサイズを知らない場合は、画像の読み込み中にページがちらつきます。

例文

高さと幅の属性を使用して、送信ボタンとして画像を定義します

<input type=”image” src=”img_submit.gif” alt=”Submit” width=”48″ height=”48″>
スポンサーリンク

list属性

list 属性は <datalist>、 <input> 要素に対して事前定義されたオプションを含む要素を参照します。

例文

<input> は <datalist>に事前定義された値を持つ：

<input list=”browsers”>

<datalist id=”browsers”>
  <option value=”Internet Explorer”>
  <option value=”Firefox”>
  <option value=”Chrome”>
  <option value=”Opera”>
  <option value=”Safari”>
</datalist>

最小および最大属性

min と max を <input> と属性の最小値と最大値を指定できます。

min と max を 次の入力タイプで　指定できます　属性：数、範囲、日付、日時、ローカル、月、時間、週

例文

<input>要素は最小値と最大値を持つ：

Enter a date before 1980-01-01:
<input type=”date” name=”bday” max=”1979-12-31″>

Enter a date after 2000-01-01:
<input type=”date” name=”bday” min=”2000-01-02″>

Quantity (between 1 and 5):
<input type=”number” name=”quantity” min=”1″ max=”5″>

スポンサーリンク

複数の属性

multiple 属性は、ユーザーが <input> 要素に複数の値を入力できることを指定します。

multiple 属性は、email、およびfileという入力タイプで機能します。

例文

複数の値を受け入れるファイルアップロードフィールド

Select images: <input type=”file” name=”img” multiple>

パターン属性

pattern 属性は、正規表現を指定する <input> 要素の値が照合されています。

pattern 属性は、テキスト、検索、URL、tel、電子メール、およびパスワードの入力タイプで機能します。

ヒント: グローバルな title 属性を使用して、ユーザーにしてください。

例文

3文字だけを含めることができる入力フィールド（数字や特殊文字は含まない）

Country code: <input type=”text” name=”country_code” pattern=”[A-Za-z]{3}” title=”Three letter country code”>

プレースホルダー属性

placeholder 属性は、入力フィールドの期待値（サンプル値またはフォーマットの簡単な説明）を説明するヒントを指定します。

ヒントは、ユーザーが値を入力する前に入力フィールドに表示されます。

placeholder 属性は、テキスト、検索、URL、tel、電子メール、およびパスワードの入力タイプで機能します。/p>

例文

プレースホルダテキストを含む入力フィールド

<input type=”text” name=”fname” placeholder=”First name”>

必須の属性

required 属性は、フォームを送信する前に入力フィールドに入力する必要があることを指定します。

required 属性は、テキスト、検索、URL、tel、電子メール、パスワード、日付の選択、番号、チェックボックス、ラジオ、ファイルの入力タイプで機能します。

例文

必須入力フィールド

Username: <input type=”text” name=”usrname” required>

ステップ属性

step は<input> 要素で法的な数の間隔を指定する。

例: if step=”3″, legal numbers could be -3, 0, 3, 6, etc.

ヒント: step属性をmax属性およびmin属性と一緒に使用して、一定範囲の有効な値を作成できます。

step 属性は、数値、範囲、日付、日時ローカル、月、時間、および週の入力タイプで機能します。

例文

指定された有効な番号間隔を持つ入力フィールド

<input type=”number” name=”points” step=”3″>
タグ: , , , ,

コメントを残す