フォームを作成する方法 (form) [HTML/CSS]

フォーム

参考：

form | MDN

使い方

参考：

HTML のフォームの使い方 | コードキッチン

フォームの使い方や設置 | Web Design Leaves

FORM | HTML クイックリファレンス

form タグとは | コーディングのプロが作る HTML タグ辞典

導入

参考：

初めてのフォーム | MDN

基本

参考：

基本的なネイティブフォームコントロール | MDN

入力要素

• input

参考：

input タグの使い方 コンプリートガイド | コードキッチン

input の使い方と type 属性の一覧をサンプル付きで紹介 | webliker

INPUT | HTML クイックリファレンス

input 要素 | TAG index

input タグ | コーディングのプロが作る HTML タグ辞典

input – 入力欄／フォーム入力要素 | MDN

input Tag | W3Schools

入力欄の初期値を指定する

• value

参考：

value – 初期値の指定 | CMAN

value – input | MDN

テキスト入力欄

• input type=text
• areatext

参考：

input type=”text” | MDN

textarea | MDN

一行テキストフィールド (text)

参考：

input type=”text” でテキストフィールドを作成する | コードキッチン

input type=”text” | HTML クイックリファレンス

INPUT type=”text” | HTML クイックリファレンス

input type=”text” | MDN

テキストエリア (textarea)

参考：

textarea タグの使い方 | コードキッチン

TEXTAREA | HTML クイックリファレンス

textarea | コーディングのプロが作る HTML タグ辞典

readonly 属性 | HTML5 入門

readonly | MDN

textarea Tag | W3Schools

ドロップダウンメニュー

参考：

select 要素 – プルダウンメニューを作る | TAG index

select タグ | コーディングのプロが作る HTML タグ辞典

SELECT | HTML クイックリファレンス

select – 選択要素 | MDN

プレースホルダーを設定する (placeholder)

参考：

input placeholder | HTML クイックリファレンス

入力フォームに最初からテキストを表示させる簡単な方法 | 株式会社ジェイクール

プレースホルダーの色を変更する

参考：

How To Change Input Placeholder Color | W3Schools

placeholder の色を変える方法 – Qiita

placeholder の文字色を変更する | cly7796.net

placeholder 属性のテキストカラーを変更 – Qiita

::placeholder | MDN

ラベル (label)

for 属性に input の ID を指定する。

<label for="search_box">検索<span class="colon">：</span></label>
<input type="text" id="search_box">Code language: HTML, XML (xml)

label タグで input 要素を囲む。

<label><input type="checkbox" value="1">同意する</label>Code language: HTML, XML (xml)

参考：

部品とラベルを関連付ける | TAG index

label – フォームの入力項目と項目名を関連付ける | ウェブランサー

label タグとは | コーディングのプロが作る HTML タグ辞典

accept-charset

• UTF-8
• Shift_JIS
• EUC-JP
• ISO-8859-1

参考：

accept-charset 属性 | HTML5 入門

jQuery でフォームの accept-charset を動的に変更して UTF-8 / EUC-JP / SHIFT_JIS に対して同時送信 | logical error

フォームから charset の違うデータを送信する方法 – Microsoft TechNet

accept-charset Attribute | W3Schools

Setting the character encoding in form submit for Internet Explorer – Stack Overflow

キャレット

キャレットを消す

caret-color: transparent;

参考：

caret-color | MDN

caret-color でキャレットの色を変える | nlog

caret-color | development log

caret-color | Can I use… Support tables

caret-color Property | W3Schools

caret-color | CSS-Tricks

Hide blinking input cursor with CSS | CodePen

How to remove the caret from an input element – Stack Overflow

Hide textfield blinking cursor – Stack Overflow

required

参考：

required | HTML クイックリファレンス

フォームで入力必須であることを指定する input 要素の required 属性を調べてみた | ツキミログ

フォームの必須入力項目を指定する | GRAYCODE

Adding an asterisk to required fields in Bootstrap | Adeel’s Corner

adding asterisk to required fields in bootstrap 3? – Stack Overflow

パスワード入力欄

参考：

ペーストが禁止されている HTML フォームに無理やりペーストするワンライナー | TechRacho

ショートカットキーを設定する

フォームの要素にアクセスキーを設定することで、ショートカットキーを使用してフォームの要素にフォーカスを移す、あるいは要素の選択が可能になる。

accesskey="j"

フォームの入力欄に accesskey 属性を指定してショートカットキーを設定する。

<input type="text" id="name" name="name" accesskey="n">Code language: HTML, XML (xml)

Winsows の場合

Alt + 指定したアクセスキー：リンク先へ移動する／フォームの要素にフォーカスする／要素を選択する

Mac の場合

Alt + Ctrl + 指定したアクセスキー：リンク先へ移動する／フォームの要素にフォーカスする／要素を選択する

参考：

要素にアクセスキーを設定する | GRAYCODE

フォームとアクセシビリティ | The Web KANZAKI

要素にアクセスキーを割り当てる | TAG index

アクセスキー | とほほの WWW 入門

accesskey 属性 | W3G

accesskey – アクセスキー割当 | CMAN

accesskey | MDN

検索欄

参考：

input type=”search” | MDN

ARIA

参考：

search ロール – ARIA | MDN

Making a Search Form Accessible: label vs aria-label vs aria-labelledby – Stack Overflow