HTML メモ

for属性とは

formパーツと要素を関連づけるための属性
同じ内容のid属性をもつ要素と結び付く

<form>
  <label for="name">名前</label>
  <input type="text" id="name">
</form>

button要素

※typeの初期値は submitのため、type="button"にするのを忘れないように!!

<button type="button" class="btn">クリックしてね</button>

tabindex属性

グローバル属性
要素が入力フォーカスを持てる場合に、キーボードの順次ナビゲーション (ふつうは名前の由来である Tab キーによる) に加わるかどうか、どの位置に加わるかを示す。

<input name="search_query" tabindex="0" type="text">

spellcheck属性

グローバル属性 列挙型
要素内容のスペルチェックや文法チェックの有無を指定します。

<textarea cols="50" rows="5" name="message" spellcheck="true">
</textarea>

Document

※スペルチェック後にどういう挙動をするかは、ユーザエージェントによる

autocapitalize属性

グローバル属性 列挙型
ユーザーによって入力／編集されたとき、入力文字列の先頭大文字化が自動的変換するかどうか

<input name="search_query" type="text" autocapitalize="none">

capitalize　の意味 「~を利用する」
Document

autocomplete属性

入力値としてテキストまたは数値を取るいくつかの種類の <input> 要素で利用できます。 autocomplete を使用すると、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆するのと同様に、ユーザーエージェントがフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定します。

<input name="search" type="text" autocomplete="none">

Document

autocorrect属性

標準外属性 Safariで利用
ユーザーが <input> にテキストを入力または編集した際にオートコレクトを実行するかを制御します
autocorrect属性はiPhoneまたはiPad上で動作し、オートコンプリートはAndroidを実行するすべてのデバイス用です。

<input name="search" type="text"
  autocorrect="none"
  autocomplete="none">

aria-haspopup属性

WAI-ARIA属性
ポップアップメニューが存在するかどうかを示すためのWAI-ARIAの属性です。

<input name="search" type="text" aria-haspopup="false">

Document

dir属性

グローバル属性 列挙型
要素のテキストの書字方向を示す

# 左から
<input name="search" type="text" dir="ltr">

Document

aria-autocomplete属性

WAI-ARIA属性
入力補完のサジェストを提供するための属性です

value	説明
inline	カレットの後に入力補完のテキストを提供する
list	ユーザが選択できるリストで提供する
both	ユーザが選択できるリストで提供され、現在選択されているテキストもインラインで表示する
none (default)	サジェストは提供されない

<input name="search" type="text" aria-autocomplete="list">

role=combobox とは

コンボボックスの見た目はプルダウンメニューと同じです。
選択肢から選ぶ以外にキーボードから文字を入力することができるのが「コンボボックス」となります。

<input name="search" type="text" role="combobox">

Document