HTMLのinputタグとは？入力フィールドの基本と主要属性の一覧を解説
HTMLの <input> タグは、フォーム内で入力要素（ユーザーがデータを入力できるコントロール）を宣言するために使用されます。
テキストボックスやチェックボックス、ラジオボタンなど、さまざまな種類の入力欄を作成できる、フォームの中核を担う重要な要素です。ここでは、<input> 要素で利用できる主な属性を一覧形式で紹介します。
input要素の主な属性一覧
| 属性 | 値 | 説明 |
|---|---|---|
| accept | コンテンツタイプ | サーバーが受け付けるコンテンツタイプをカンマ区切りのリストで指定します |
| align | left / right / top / middle / bottom | 非推奨 － コンテンツの配置（アラインメント）を定義します |
| alt | テキスト | ブラウザやユーザーエージェントが入力コントロールを表示できない場合に使用される代替テキストを指定します |
| autocomplete | on / off | <input> 要素のオートコンプリート（自動補完）機能の有効・無効を指定します |
| autofocus | autofocus | ページが読み込まれたときに、<input> 要素が自動的にフォーカスを受け取ることを指定します |
| checked | checked | type="radio" または type="checkbox" の場合に、ページ読み込み時にあらかじめ選択された状態になります |
| disabled | disabled | 入力コントロールを無効化します。ユーザーによる変更ができなくなり、フォーカスも受け取らず、Tab移動でもスキップされます |
| form | form_id | 関連付ける1つ以上のフォームを指定します |
| formaction | URL | フォーム送信時に入力コントロールを処理するファイルのURLを指定します |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | サーバーへフォームデータを送信する際のエンコード方法を指定します |
| formmethod | post / get | action URLへデータを送信するためのHTTPメソッドを定義します |
| formnovalidate | formnovalidate | 送信時にフォーム要素を検証しないことを定義します |
| formtarget | _blank / _self / _parent / _top | フォーム送信後に受信したレスポンスを表示するターゲットを指定します |
| height | ピクセル数 | 高さを指定します |
| list | datalist_id | <input> 要素に事前定義済みの選択肢を提供する <datalist> 要素を指定します |
| max | 数値 / 日付 | 最大値を指定します |
| maxlength | 数値 | テキストフィールドに入力できる最大文字数を定義します |
| min | 数値 / 日付 | 最小値を指定します |
| multiple | multiple | ユーザーが複数の値を入力できることを指定します |
| name | テキスト | 入力コントロールに名前を割り当てます |
| pattern | 正規表現 | <input> 要素の値が照合される正規表現を指定します |
| placeholder | テキスト | 期待される入力値を示す短いヒントを表示します |
| readonly | readonly | 入力コントロールを読み取り専用に設定します。ユーザーは値を変更できませんが、フォーカスは受け取ることができ、Tab移動の対象にも含まれます |
| required | required | フォーム送信前にその入力フィールドへの記入が必須であることを指定します |
| size | 数値 | コントロールの幅を指定します。type="text" または type="password" の場合は文字数単位、それ以外の場合はピクセル単位となります |
| src | URL | 表示する画像のURLを定義します。type="image" の場合のみ使用されます |
| step | 数値 | 入力フィールドで許容される数値の間隔を指定します |
| type | button / checkbox / color / date / datetime-local / email / file / hidden / image / month / number / password / radio / range / reset / search / submit / tel / text / time / url / week | コントロールの種類を指定します |
| value | テキスト | コントロールの初期値を指定します。type="checkbox" または type="radio" の場合はこの属性が必須です |
| width | ピクセル数 | 幅を指定します |
input要素の使用例
以下のコードを実行して、HTMLでの <input> 要素の実装を試してみましょう。
<!DOCTYPE html>
<html>
<head>
<title>HTML input Tag</title>
</head>
<body>
<form action = "/cgi-bin/hello_get.cgi" method = "get">
名：
<input type = "text" name = "first_name" value = "" maxlength = "100" />
<br />
姓：
<input type = "text" name = "last_name" value = "" maxlength = "100" />
<input type = "submit" value = "送信" />
</form>
</body>
</html>この例では、type="text" のテキスト入力フィールドを2つと、type="submit" の送信ボタンを持つフォームを作成しています。maxlength 属性により、それぞれの入力欄には最大100文字まで入力可能です。用途に応じて type 属性の値を変えることで、メールアドレス用、日付選択用など、さまざまな入力フィールドを簡単に作成できます。
-
HTMLで日時入力タイプ（datetime-local）を使う方法を徹底解説
HTMLにおける日時入力タイプとはHTMLでは、<input type=datetime-local> を使用することで、日時入力タイプを実装できます。この入力タイプを利用すると、ユーザーが日付と時刻を簡単に選択できるようになります。入力フィールドをクリックすると、日時を選択するためのピッカー（ポップアップカレンダー）が自動的に表示されるのが特徴です。注意： 従来の input type=datetime は、Firefox や Internet Explorer ではサポートされていません。動作が確認されているのは Google Chrome などの一部のブラウザに限られます。そ
-
HTML入力フィールドのオートコンプリート（自動補完）を無効にする方法
はじめにHTMLの入力フィールドでは、ブラウザのオートコンプリート（自動補完）機能によって、過去に入力した内容が候補として表示されることがあります。この機能を無効にしたい場合は、<input>要素にautocomplete属性を指定します。「off」を設定すれば無効になり、「on」を設定すれば有効になります。サンプルコード以下は、姓の入力欄ではオートコンプリートを無効にし、名の入力欄では有効にする例です。<!DOCTYPE html> <html> <head> <style> input{ font-size