=========================================================================================
<< BACK >>
=========================================================================================
selected
HTMLのドロップダウンリスト（select要素）でoption要素にselected属性を追加すると、ページ読み込み時にその項目が選択される。
<select name="mySelect">
<option value="apple">りんご</option>
<option value="banana" selected>バナナ</option> // ← これがデフォルトで選択される
<option value="orange">みかん</option>
</select>
<< BACK >>
=========================================================================================
margin
要素の外側に余白（スペース）を設定するためのプロパティ。
主なmarginの指定方法
- 一括指定（全方向）
margin: 10px; → 上下左右すべてに10pxの余白。
- 一括指定（上下・左右）
margin: 10px 20px; → 上下に10px、左右に20pxの余白。
- 一括指定（上・左右・下）
margin: 10px 20px 30px; → 上に10px、左右に20px、下に30pxの余白。
- 一括指定（上・右・下・左：時計回り）
margin: 10px 20px 30px 40px; → 上(10px)、右(20px)、下(30px)、左(40px)の順。
- 個別指定（特定の辺のみ）
margin-top: 10px; (上)margin-right: 20px; (右)margin-bottom: 30px; (下)margin-left: 40px; (左)
auto（自動調整）
margin: 0 auto; などでブロック要素の左右マージンをautoにすると、親要素内で中央寄せができます。
marginの特徴
- マージンの相殺: 上下の
marginは、隣接する要素間で大きい方の値が適用される（相殺される）ことがあります。
- 負の値: 負の値を指定すると、要素を重ねて表示するなど、通常より近づけることができます。
- 背景:
margin領域は透過（背景色なし）になります
<< BACK >>
=========================================================================================
<input>
ユーザーからデータを受け取る
<input> の型
指定しない場合の既定の型は text です。
| 型 | 説明 |
|---|
| button | プッシュボタンで、既定の動作を持たず、value 属性の値（既定では空）を表示します。 |
| checkbox | チェックボックスで、選択または未選択のうちひとつの値をとることができます。 |
| color | 色を指定するためのコントロールです。対応しているブラウザーでは、アクティブになったときにカラーピッカーが開きます。 |
| date | 日付（時刻を除いた年、月、日）を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは年月日の数値のホイールが開きます。 |
| datetime-local | タイムゾーン情報がない日付と時刻を入力するためのコントロールです。対応しているブラウザーでは、アクティブになったときに日付ピッカーまたは日付および時刻部分の数値のホイールが開きます。 |
| email | 電子メールアドレスを編集するための欄です。text 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。 |
| file | ユーザーがファイルを選択するコントロールです。accept 属性を使用して、コントロールが選択することができるファイル形式を定義することができます。 |
| hidden | 表示されないコントロールですが、その値はサーバーに送信されます。隣の列には例がありますが、非表示です。 |
| image | グラフィックの submit ボタンです。src 属性で定義された画像を表示します。alt 属性は src の画像が見つからないときに表示されます。 |
| month | タイムゾーン情報がない年と月を入力するためのコントロールです。 |
| number | 数値を入力するためのコントロールです。スピナーを表示し、既定の検証を追加します。動的キーボードを持つ一部の端末では、テンキーを表示します。 |
| password | 入力値を隠す単一行テキストフィールド。サイトが安全ではない場合はユーザーに警告します。 |
| radio | ラジオボタンで、同じ name の値を持つ複数の選択肢から一つの値を選択することができます。 |
| range | 厳密な値であることが重要ではない数値を入力するためのコントロールです。範囲のウィジェットを表示し、既定では中央の値になります。 min と max の組み合わせで、受け入れる値の範囲を定義することができます。 |
| reset | フォームのコントロールを既定値に初期化するボタンです。推奨しません。 |
| search | 検索文字列を入力するための単一行のテキスト欄です。入力値から改行が自動的に取り除かれます。対応しているブラウザーでは、入力欄を初期化するための削除アイコンが表示されることがあり、欄の内容を消去するために使用することができます。動的なキーパッドを持つ一部の端末では、Enter キーの代わりに検索アイコンを表示します。 |
| submit | フォームを送信するボタンです。 |
| tel | 電話番号を入力するためのコントロールです。動的なテンキーを備えた一部の機器では、電話用のテンキーを表示します。 |
| text | 既定値です。単一行のテキスト入力欄です。改行は自動的に入力値から取り除かれます。 |
| time | タイムゾーン情報がない時刻を入力するためのコントロールです。 |
| url | URL を入力するための入力欄です。text 入力欄のように見えますが、対応しているブラウザーや動的なキーボードのある端末では、入力値を検証したり、関連するキーボードを表示したりします。 |
| week | 年と週番号で構成される日付を入力するためのコントロールです。週番号はタイムゾーンを伴いません。 |
属性
| 属性 | 型 | 説明 |
|---|
accept | file | ファイルアップロードコントロールで期待されるファイル形式のヒント |
alt | image | image 型の alt 属性です。アクセシビリティのために必要です。 |
autocapitalize | url, email, password を除くすべて | 入力されたテキストの自動大文字化を制御します。 |
autocomplete | checkbox、radio、ボタンを除くすべて | フォームの自動補完機能のためのヒント |
capture | file | ファイルアップロードコントロールのメディアキャプチャ入力方法 |
checked | checkbox, radio | コマンドやコントロールがチェックされているか |
dirname | hidden, text, search, url, tel, email | フォーム送信時に要素の書字方向を送信するために使用するフォームフィールドの名前 |
disabled | すべて | コントロールが無効であるかどうか |
form | すべて | コントロールを form 要素に関連付ける |
formaction | image, submit | フォームの送信に使用する URL |
formenctype | image, submit | フォームの送信に使用するデータセットのエンコード種別 |
formmethod | image, submit | フォームの送信に使用する HTTP メソッド |
formnovalidate | image, submit | フォームの送信でフォームの検証をバイパス |
formtarget | image, submit | フォーム送信に使用する閲覧コンテキスト |
height | image | <img> の height 属性と同じで、垂直方向の大きさ |
list | hidden, password, checkbox, radio, ボタンを除くすべて | 自動補完の選択肢の入った <datalist> の id 属性の値 |
max | date, month, week, time, datetime-local, range | 最大値 |
maxlength | text, search, url, tel, email, password | value の最大長（文字数） |
min | date, month, week, time, datetime-local, range | 最小値 |
minlength | text, search, url, tel, email, password | value の最短長（文字数） |
multiple | email, file | 論理属性。複数の値を許可するかどうか |
name | すべて | 入力欄コントロールの名前。名前/値の組の部分としてフォームと一緒に送信される |
pattern | text, search, url, tel, email, password | 有効になるために value が一致する必要があるパターン |
placeholder | text, search, url, tel, email, password, number | フォームコントロールが空の時にフォームコントロール内に表示される内容 |
popovertarget | button | <input type="button"> がポップオーバー要素の制御用として指定する |
popovertargetaction | button | ポップオーバー制御で実行するアクションを指定する |
readonly | hidden, range, color, checkbox, radio, ボタンを除くすべて | 論理属性。値が編集できない |
required | hidden, range, color, ボタンを除くすべて | 論理属性。フォームが送信できるようにするためには値が必要 |
size | text, search, url, tel, email, password | コントロールの大きさ |
src | image | <img> の src 属性と同じで、画像リソースのアドレス |
step | date, month, week, time, datetime-local, range | 有効と見なされる増分 |
type | すべて | フォームコントロールの型 |
value | すべて | コントロールの値。HTML で指定された場合、初期値に相当する |
width | image | <img> の width 属性と同じで、水平方向の大きさ |
サンプルデモ
type=”text”：1行テキストボックスを作る。
1 | <input type="text" name="text" value="初期値（任意の値）"> |
type=”password”：入力した内容にマスクがかかるテキストボックスを作る。
1 | <input type="password" name="password" value="1234"> |
type=”radio”：ラジオボタンを作る。
1 | <input type="radio" name="radio" value="radio1">radio1 |
2 | <input type="radio" name="radio" value="radio2">radio2 |
type=”checkbox”：チェックボックスを作る。
1 | <input type="checkbox" name="checkbox" value="checkbox1">checkbox1 |
2 | <input type="checkbox" name="checkbox" value="checkbox2">checkbox2 |
type=”file”：ファイル参照ボタンを作る。
1 | <input type="file" name="file"> |
type=”hidden”：非表示のテキストボックスを作る。
1 | <input type="hidden" name="hidden" value="初期値（任意）"> |
type=”submit”：フォームの実行ボタンを作る。
1 | <input type="submit" value="実行する"> |
type=”image”：画像を使ったフォームの実行ボタンを作る。
1 | <input type="image" src="btn_send.png" width="224" height="64" alt="送信する" value="送信する"> |
type=”reset”：フォームに入力した内容をリセットするボタンを作る。
1 | <input type="reset" value="リセットする"> |
type=”button”：汎用的なボタンを作る。
1 | <input type="button" value="ボタン"> |
size=”20″：テキストボックスのサイズを変更する。
1 | <input type="text" name="text" value="" size="10"> |
2 | <input type="text" name="text" value="" size="20"> |
maxlength=”10″：入力できる文字数を制限する。
1 | <input type="text" name="text" value="" maxlength="10"> |
<< BACK >>
=========================================================================================