1. HOME
  2. フロントエンド
  3. おさらいform【Webクリエイター能力認定試験対策】

おさらいform【Webクリエイター能力認定試験対策】

フロントエンド

前回(おさらいHTML5)と同じく「Webクリエイター能力認定試験」対策としてformの勉強兼備忘録としてまとめます。

formとは

<FORM>は入力・送信フォームを作成する際に使用します。 <FORM>>~</FORM>の間に、 <INPUT>・<SELECT>・ <TEXTAREA>等のタグにより、 一行テキストボックス・ボタン・チェックボックス・ラジオボタン・セレクトボックス・スクロールテキストボックス等の部品を配置します。

HTMLタグリファレンス より

属性

まずformは<form></form>で括り、その中にテキストボックスなどを置き作ります。
formで使用できる属性(◯◯="")は

actionデータの送信先(サーバーのCGIプログラムのURI)を指定する
method送信時の転送方法を指定する(post,get)
target送信結果のフレーム、ウインドウの指定
nameフォームの名前を指定する
enctype送信時に使用するコンテンツのMINE typeを指定する
accept-charsetデータの受け側の文字エンコーディングを指定する
accepttype="fileの時のサーバが受け入れるファイルの種類を指定"

type属性

HTML5から追加されたtypeもあり、様々なものがあります。

type="text"

通常のテキスト入力欄です

名前:

名前:<input type="text">

type="password"

パスワード入力欄で入力したものはすべて見えないようになります。

パスワード:

パスワード:<input type="password">

type="checkbox"

チェックボックスを形成します。属性checkedをつけることで選択された状態にできます。
チェック

<input type="checkbox">チェック

type="file"

ファイルをアップロードする際使用します。WWWサーバー側にはファイルを受け取るための特別なCGIスクリプトなどを設置しておく必要があります。

<input type="file">

type="radio"

ラジオボタンを形成します。同じname属性指定することでラジオボタングループ形成できます。
チェックボックスとは違いひとつしか選択することができません。チェックボックスと同じく属性checkedをつけることで選択された状態にできます。
はい
いいえ

<input type="radio" name="sample" checked>はい
<input type="radio" name="sample">いいえ

type="submit"

送信ボタンを形成します。クリックすると<form>のaction属性で指定したアクションが呼び出されます。

<input type="submit" value="送信" onclick="">

type="reset"

リセットボタンを形成します。<form>内で入力した情報がすべてクリアされます。

<input type="reset" value="リセット" onclick="return false;">

type="button"

汎用ボタンを形成します。type="image"にすることで画像タイプのボタンにすることも可能です。

<input type="button" value="ボタン" onclick="">

type="search"

検索文字列の入力欄を形成します。

<input type="search"> <input type="button" value="検索">

type="tel"

電話番号の入力欄を形成します。電話番号用のテンキーが表示されます(スマホ)

電話番号:

<p>電話番号: <input type="tel"></p>

type="url"

URLの入力欄を形成します。URLでないものを入力するとバリデーションエラーになります。

URL:

<p>URL: <input type="url"></p>

type="email"

Eメールアドレスの入力欄を形成します。@がないものはバリデーションエラーになります。

メールアドレス:

<p>メールアドレス: <input type="email"></p>

type="date"

日付の入力欄を形成します。

日付:

<p>日付: <input type="date"></p>

type="time"

時刻の入力欄を形成します。

時刻:

<p>時刻: <input type="time"></p>

type="datetime"

日時の入力欄を形成します。type="datetime-local"でローカルの日時も可能。

日時:


日時(ローカル):

<p>日時: <input type="datetime"></p>
<p>日時(ローカル): <input type="datetime-local"></p>

type="month"

年月の入力欄を形成します。

年月:

<p>年月: <input type="month"></p>

type="week"

週の入力欄を形成します。(PC)

週:

<p>週: <input type="week"></p>

type="number"

数値の入力欄を形成します。

数値:

<p>数値: <input type="number"></p>

type="range"

レンジ入力欄を形成します。min, max値の指定も可能。

<input type="range">

type="color"

色の選択(PC)・入力ができます。

<input type="color">

type="hidden"

ブラウザでは表示されない、隠し項目の入力欄を形成します。

<input type="hidden">

type属性以外の属性(抜粋版)

属性はたくさんありますが、得に使用されそうな7つを抜粋してみました。

required

必須項目に使用します。
text / password / file / checkbox / radio / search / tel / url / email / date / time / numberに使用可能です。

max

最大値の指定ができます。
date / time / number / rangeに使用可能です。

min

最大値の指定ができます。
date / time / number / rangeに使用可能です。

checked

初期状態でチェックされた状態にします。
checkbox / radioに使用可能です。

fieldset

フォームの入力項目のグループに使用します。

disabled

(グループ内の)部品を無効化します。
text / password / file / checkbox / radio / submit / reset / button / image / search / tel / url / email / date / time / number / range / color に使用可能です。

readonly

読み出し専用にします。
text / password / search / tel / url / email / date / time / numberに使用可能です。

CSSでの属性指定方法

[属性名]

属性名が一致する要素に適用されます。
例;a[href]
href属性が指定されたaにスタイルが適応される

[属性名="属性値"]

属性名と属性値が一致する要素に適用されます。
例:input[type="text"]
type属性にtextが指定されたinputにのみスタイルが適応

「 ~= 」で空白で区切られたクラス名などの属性値に対応
「 | =」でハイフンで区切られた属性値に対応。ハイフンより前の文字列と一致したらスタイルが適応される


Webクリエイター能力認定試験

この記事を読んだ方におすすめ