今回は、HTMLでユーザーが書き込めるテキストフィールドを作成する方法を紹介します。
お問い合わせフォームなどの名前、住所、ユーザーID、コメントやお問い合わせのタイトルなど短いテキストの入力欄を作成します。
今回の記事を3分程読む事で下記の様なテキストフィールドを作成出来る様になります。
ユーザーが書き込めるテキストフィールドを表示させる方法
ユーザーが書き込めるテキストフィールドを表示させるには以下のHTMLを使用します。
| <inout type=”text” name=”送信時の名前”> | テキストフィールド |
| <label> | フォームの部品につけるラベル |
<inout>はフォームの部品を作成するためのタグの一つです。
typeを属性を変更する事で、ラジオボタンやチェックボックスまでも作成することが出来ます。
お問い合わせフォームを作成するには必ず使用するタグです。
このtypeを属性をtexrにする事でテキストフィールドが完成します。
テキストフィールドに入力するテキストは途中で改行が出来ないので名前やユーザーID、パスワードなど比較的短い文字列に使い様にしましょう。
<label>は、それが何かを表す文字列などを表示させる事が出来ます。フォームでは<label></label>で囲って、その部分が何を示すかを表現するのが一般的です。
具体的には以下の様に記述していきます。
以下のコードは上で紹介したテキストフィールドのHTMLです。
<form action="#" method="POST">
<p><label>お名前<input type="text" name="fulneme"></label></p>
<p><input type="submit" value="送信"></p>
</form>メールアドレスの入力欄なら専用のテキストフィールドを使う
お問い合わせフォームにはメールアドレスの入力欄もあると思います。
テキストフィールドにメールアドレスの入力をお願いしたい場合は、それ専用のテキストフィールドを以下のHTMLで作成します。
| <inout type=”emailt” name=”送信時の名前”> | メール専用テキストフィールド |
メール専用テキストフィールドに入力欄は、見た目は通常のものと違いは無いが、入力した文字列がメールアドレスかを判断してくれます。そのため、メール専用テキストフィールドにメールアドレス以外の文字列を入力すると警告が表示されるようになります。
メールアドレスの欄はこの専用テキストフォームを使い、通常のものと使い分けてフォームを作成しましょう。
電話専用のテキストフィールド
電話専用のテキストフィールドも存在します。
| <inout type=”tel” name=”送信時の名前”> | 電話専用テキストフィールド |
電話専用のテキストフィールドでは、メール専用の様に警告は表示されません。
しかしスマホで電話専用のテキストフィールドをクリックするとテンキー型のキーボードが表示されるので、ユーザビリティは良いかと思います。
フォームの入力は一般的に面倒臭いものなので、この辺の気遣いは徹底したいところです。
パスワード専用のテキストフィールド
パスワード専用のテキストフィールドは、パスワードを入力すると「●●●●●●●」と表示されるアレです。
| <inout type=”password” name=”送信時の名前”> | パスワード専用テキストフィールド |
ハッキングによる覗き見や、純粋な覗き見防止のためにパスワードはこの専用テキストフィールドを使用するのが常識です。
以上が「【HTML】ユーザーが書き込めるテキストフィールドを表示させる方法」でした。
テキストフィールドに薄らとしたテキスト（説明文）を表示させる方法は以下の記事で詳しく紹介しています。
気の使えるフォーム作成では重要暗躍割りなので合わせて覚えておきましょう。
