フォーム
参考:
使い方
参考:
フォームの使い方や設置 | Web Design Leaves
form タグとは | コーディングのプロが作る HTML タグ辞典
導入
参考:
基本
参考:
入力要素
参考:
input タグの使い方 コンプリートガイド | コードキッチン
input の使い方と type 属性の一覧をサンプル付きで紹介 | webliker
input タグ | コーディングのプロが作る HTML タグ辞典
入力欄の初期値を指定する
参考:
テキスト入力欄
input type=text
areatext
参考:
一行テキストフィールド (text)
参考:
input type=”text” でテキストフィールドを作成する | コードキッチン
input type=”text” | HTML クイックリファレンス
INPUT type=”text” | HTML クイックリファレンス
テキストエリア (textarea)
参考:
textarea | コーディングのプロが作る HTML タグ辞典
ドロップダウンメニュー
参考:
select 要素 – プルダウンメニューを作る | TAG index
select タグ | コーディングのプロが作る HTML タグ辞典
プレースホルダーを設定する (placeholder)
参考:
input placeholder | HTML クイックリファレンス
入力フォームに最初からテキストを表示させる簡単な方法 | 株式会社ジェイクール
プレースホルダーの色を変更する
参考:
How To Change Input Placeholder Color | W3Schools
placeholder の文字色を変更する | cly7796.net
placeholder 属性のテキストカラーを変更 – Qiita
ラベル (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)
参考:
label – フォームの入力項目と項目名を関連付ける | ウェブランサー
label タグとは | コーディングのプロが作る HTML タグ辞典
accept-charset
- UTF-8
- Shift_JIS
- EUC-JP
- ISO-8859-1
参考:
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 でキャレットの色を変える | nlog
caret-color | Can I use… Support tables
caret-color Property | W3Schools
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
参考:
フォームで入力必須であることを指定する input 要素の required 属性を調べてみた | ツキミログ
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
+ 指定したアクセスキー:リンク先へ移動する/フォームの要素にフォーカスする/要素を選択する
参考:
フォームとアクセシビリティ | The Web KANZAKI
検索欄
参考:
ARIA
参考:
Making a Search Form Accessible: label vs aria-label vs aria-labelledby – Stack Overflow