HTML5における＜input＞タグの使い方

<input>要素は、フォームの部品を作る要素の１つです。様々な要素と値を組み合わせることで、多種多様な部品を作って、好みの入力欄を作成することができます。今回は、HTML5における<input>タグの使い方をご紹介します。

HTML5における<input>タグの使い方

<input>は、内容を持たない空要素と呼ばれる要素です。終了タグは省略できます。type属性を使用して、フォームの部品を作っていきます。一番基本的な例が以下のテキストです。

type属性の値をtextにすると、1行のテキストフィールドが表示されます。textはデフォルトの値なので、ただ<input>だけを入力した時も同じ表示になります。

値にtel,url,emailを利用すると、バリデーション機能という、決まりに沿っていないと送信ができない入力欄になります。emailであれば、@が入ってないとエラーが表示されます。

このテキスト入力用の部品は、type以外の属性を併用すると様々な機能を追加できるので、色々とカスタマイズして、便利なフォームを作成してみてください。