Tweet

Pocket

【こちらの記事は、約4分程でお読みいただけます。】

こんにちは、水曜日のブログ担当の工藤です。

今日はテキストを入力するフォームタグについて説明していきます。

inputタグとは

inputタグはテキスト入力欄や実行ボタン等を構成する部品のタグです。
typeの属性を変更することで、様々な変更が出来ます。

<input type="text" value=">　<!-- 標準的なテキストを入力できます -->
<input type="email" value=">　<!--メールアドレスの入力欄を作成する。 -->
<input type="passwprd" value=">　<!--パスワードの入力欄を作成する -->
<input type="hidden" value=">　<!-- 隠しデータを指定する -->
<input type="search" value=">　<!-- 検索テキストの入力欄を作成する -->
<input type="tel" value=">　<!-- 電話番号の入力欄を作成する -->
<input type="datetime" value=">　<!-- 時間の入力欄を作成する -->
<input type="date" value=">　<!-- 日付の入力欄を作成する -->
<input type="month" value=">　<!-- 月の入力欄を作成する -->
<input type="week" value=">　<!-- 週の入力欄を作成する -->
<input type="number" value=">　<!-- 数値の入力欄を作成する -->
<input type="range" value=">　<!-- 入力幅の入力欄を作成する -->
<input type="color" value=">　<!-- 色の入力欄を作成する -->
<input type="chackbox" value=">　<!-- チェックボックスを作成する -->
<input type="radio" value=">　<!-- ラジオボタンを作成する -->
<input type="file" value=">　<!-- ファイル送信を作成する -->
<input type="submit" value=">　<!-- 送信ボタンを作成する -->
<input type="image" value=">　<!-- 画像ボタンを作成する -->
<input type="reset" value=">　<!-- リセットボタンを作成する -->
<input type="bitton" value=">　<!-- 汎用ボタンを作成する -->

上のコードを打つと以下のようになります。

　 標準的なテキストを入力できます

　メールアドレスの入力欄を作成する。

　パスワードの入力欄を作成する

　 隠しデータを指定する

　 検索テキストの入力欄を作成する

　 電話番号の入力欄を作成する

　 時間の入力欄を作成する

　 日付の入力欄を作成する

　 月の入力欄を作成する

　 週の入力欄を作成する

　 数値の入力欄を作成する

　 入力幅の入力欄を作成する

　 色の入力欄を作成する

　 チェックボックスを作成する

　 ラジオボタンを作成する

　 ファイル送信を作成する

　 送信ボタンを作成する

　 画像ボタンを作成する

　 リセットボタンを作成する

　 汎用ボタンを作成する

パスワードなどは、値が表示されませんし、日付タグは▼のボタンを押すと日付が出ます。
実際触ってみて、動作を確認してみてください。

（このブログではすでにinputタグにCSSで装飾されているのでデフォルトとは違ったインプットタグになっています）

チェックボックスタイプ

チェックボックスタイプは、指定したnemeの中から選べます。
またタグで囲むと、インプットタグをクリックしなくてもチェックできるようになるので、ユーザビリティが上がります。

<labeL><input type="checkbox" name="c1" value="1"> AAA</label>
<labeL><input type="checkbox" name="c1" value="2"> BBB</label>
<labeL><input type="checkbox" name="c1" value="3"> CCC</label>

AAA

BBB

CCC

ラジオタイプ

ラジオタイプは特殊なタイプのボタンで、指定したname属性の中からは一種類しか選べません。

<labeL><input type="radio" name="c2" value="1"> AAA</label>
<labeL><input type="radio" name="c2" value="2"> BBB</label>
<labeL><input type="radio" name="c2" value="3"> CCC</label>

AAA

BBB

CCC

style

styleを指定する場合は、inputにクラスを付けるのもいいですがinputタグでも指定出来ます。

input[type="text"]{
  padding: 6px;
  border-radius: 6px;
  color: #111;
}

これで、inputのタイプtextのみに指定することが出来ます。

また、以下の擬似要素で現在入力するインプットタグがわかって、ユーザビリティが高まります。

input[type="text"]{
  transiton: all .3s;
}

input[type="text"]:focus{
  background: #4cfed2;
}

おわりに

インプットタグには、様々なタイプがあります。
適したインプットタイプを使うのも大事ですが、日付やカラーなどはブラウザの環境などによって使えなかったりするので注意しましょう。特にIE系は注意です。

属性タイプには、valueやnameなどがあります。しかし、使うインプットによって役割や機能が異なったりする点も注意が必要です。

Tweet

Pocket

Related posts:

htmlのtable、表組みについて学ぼう テキストの意味を理解してタグを使おう Boostrapを使ってレスポンシブのグリッドシステムを扱ってみましょう 擬似クラスで作る動きのあるデザイン