フォーム (form)

参考

form | MDN

使い方

参考

HTML のフォーム (form) の使い方 コンプリートガイド | コードキッチン

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

FORM | HTML タグリファレンス (htmq.com)

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

導入

参考

初めてのフォーム | MDN

基本

参考

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

input の初期値を設定する

参考

value – 初期値の指定 | CMAN

入力要素

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

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

INPUT | HTML タグリファレンス (htmq.com)

input 要素 | TAG index

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

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

input tag | W3Schools

テキスト入力欄

  • input type=text
  • areatext

参考

input type=”text” | MDN

textarea | MDN

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

参考

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

input type=”text” | HTML5 タグリファレンス (htmq.com)

INPUT type=”text” | HTML タグリファレンス (htmq.com)

input type=”text” | MDN

テキストエリア (textarea)

参考

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

TEXTAREA | HTML タグリファレンス (htmq.com)

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

textarea tag | W3Schools

ドロップダウンメニュー

参考

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

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

SELECT | HTML タグリファレンス (htmq.com)

select – 選択要素 | MDN

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

参考

input placeholder | HTML5 タグリファレンス (htmq.com)

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

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

参考

How To Change Input Placeholder Color | W3Schools

placeholder の色を変える方法 – Qiita

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

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

::placeholder | MDN

ラベル

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

<label for="search_box">検索</label>
<input type="text" id="search_box">

label タグで input 要素を囲む。

<label><input type="checkbox" value="1">同意する</label>

参考

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

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

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

accept-charset

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

参考

accept-charset 属性 | HTML5 入門

jQuery で、FORM の accept-charset を動的に変更して UTF-8・EUC-JP・SHIFT_JIS に対して同時送信 | logical error

Form から charset の違うデータを送信する方法 | Microsoft TechNet

HTML form 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

CSS 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 | HTML5 タグリファレンス (htmq.com)

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

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

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">

Winsows の場合

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

Mac の場合

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

参考

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

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

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

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

accesskey 属性 | W3G

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

accesskey | MDN

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です