WebフォームをHTMLで作成する際に使用するinputタグ。

普段ソースコードに触れることのない方でもフォームのカスタマイズなどを行う際に知識が必要になる場面があるかもしれません。

そこでこの記事では、フォーム作成時に必要なinputタグの使い方やフォームの作成方法について解説します。

カスタマイズ自由なWebフォーム作成ツールならクライゼルをご利用ください。

Webフォームを構成する部品を作るinputタグ

HTMLでフォームを作成する際は、<form>タグ、<input>タグ、<label>タグ、<button>タグなどを使って構成していきます。その中で、<input>タグは、記入欄や送信ボタンなどのフォーム部品を設置する際に使われるタグです。

下の記事では、HTMLでフォームを作成する際に必要な各要素や属性について詳しく説明しています。ぜひあわせてご覧ください。

●内部リンク

HTML入門者必見！フォーム作成時の重要要素と属性を5つ紹介

inputタグの基本的な使い方

次に、inputタグの使い方について見ていきましょう。

formタグ内での使用が基本

Inputタグは、フォームでのみ使われるHTMLタグであり、<form></form>で括られたform要素の中で使われます。

inputタグの書き方

inputタグの基本的な書き方は以下の通りです。

<input type=”属性” name=”任意のname">

例えば、名前の入力欄なら

<input type=”text” name=”name”>

のような形で記載します。

name属性の役割

name属性は各項目を識別するためのものです。必須ではありませんが、自動返信メールでフォームに入力された値を記載する際などに必要となります。

一般的には、項目内容を英訳したものが多く使われます。

type属性の役割

type属性はフォームに何を設置するかを指定するもので、記載は必須になります。

初期値はtype=”text”になっており、指定しなかった場合はテキスト入力欄が挿入されます。type属性の主な種類については次の章で説明します。

inputタグにおけるtype属性の主な種類

inputタグは、type属性によって見た目や機能が大きく変わります。ここでは、inputタグの主なtype属性を紹介していきます。

text｜1行のテキスト入力

text属性を設定すると、1行のテキストボックスが挿入されます。複数行のテキストボックスを設置する際はtextarea属性を使用します。

checkbox｜チェックボックス

チェックボックスの項目を設置する際は、checkbox要素を使います。複数のチェックボックスを設置する際は、それぞれinputタグの記載が必要です。

radio｜ラジオボタン

択一で回答を求めるラジオボタンを設置する場合には、radio属性を使用します。選択肢には同じname属性を設定する必要があります。

number｜数値の入力欄（半角数字のみ）

number属性は、数値を入力してもらう項目で使います。ただし、0から始まる場合、ユーザーの利用環境によっては0が消えてしまうケースがあるので注意が必要です。

email｜メールアドレスの入力欄

email属性を使えば、メールアドレス入力欄が挿入できます。@が含まれているかを判定するため、形式が間違っているとエラーが表示されます。

search｜検索フォーム

searh属性を使うと、検索テキスト入力欄が挿入できます。サイト内検索の機能を付けたい場合などに使用します。

password｜パスワードの入力欄

password属性を使うとパスワード入力欄を挿入します。ユーザーが入力したテキストは「*」や「●」でふせて表示されます。

url｜サイトのURL

url属性はサイトのURL記入欄を挿入します。「http(s)://」で始まるかどうかを判定します。ただし、空白の場合はエラーが出ません。

submit｜送信ボタン

submitは送信ボタンを設置するための属性です。value属性に設定したテキストがボタン上に表示されます。

file｜ファイルのアップロード

file属性はファイルのアップロードフィールドを表示するための属性です。

accept属性でファイルの種類を制限することができます。

カスタマイズ自由自在

Webフォーム作成ツールならクライゼル

inputタグと組み合わせて使う利用頻度の高い属性

続いて、type属性、name属性以外で、inputタグで使われることの多い属性について紹介します。

minlength／maxlength属性

文字数制限をしたい場合に使われるのが、minlength／maxlength属性です。

<input type-”password” minlength=”4”>のように記述します。typeがtext、email、password、tel、url、searchの時に使用できます。

value属性

value属性はinput要素の値を指定する属性で、type属性によって役割が変わります。

テキスト入力欄などでは初期入力値の設定に使い、ラジオボタンやチェックボックスではその内容を選択した時にだけ送信されるように設定します。

placeholder属性

入力例を表示したい場合には、placeholder属性で値を設定します。

ユーザーが入力するとplaceholderで設定した内容は消えます。

required属性

required属性は、必須項目を設置する際に便利な属性です。

設定しておくと、未入力の場合にエラーメッセージが表示されます。

pattern属性

pattern属性は、文字列の表記方法を制限する場合に使われる属性です。郵便番号や電話番号の入力方法を制限したり、半角英数字の指定やパスワードの文字列指定をしたりできます。

autofocus属性

autofocus属性はフォームが表示された時に自動でフォーカスを当てる項目を指定します。

サイト構築の専門知識がなくても簡単にWebフォームを作る方法

HTMLで作成するのが難しい場合には、ツールを使って設置する方法もあります。

以下で主な2つの方法を紹介します。

WordPressのプラグインを使う

1つは、WordPressのプラグインを使う方法です。

プラグインなら無料かまたは少額で設置することができます。ただし、サーバー管理やアップデート対応、セキュリティ用のプラグイン追加なども必要になります。

Webフォーム作成ツールを使う

もう1つがWebフォーム作成ツールを使う方法です。

専用ツールですので、機能も揃っており、簡単な設定で使い始められる点が大きな魅力です。

導入するツールによって、機能やセキュリティ、費用はさまざまですので、安心して使い続けられるものを選びましょう。

簡単に高セキュアなWebフォームを作成するならクライゼル

自社で1からフォームを作成すれば自由に設計できますが、機能性を求めると手間がかかり、自社では対応しきれない場合もあるでしょう。

そこで役立つのがフォーム作成ツールです。フォームに必要な機能やセキュリティ環境が整っているため、作成・運用にも手間がかかりません。

特に、柔軟にカスタマイズできるツールを選べば、幅広いシーンで活躍するでしょう。

高機能でカスタマイズ性も高いフォーム作成ツール「クライゼル」なら、自由自在にフォームを設定することができます。

さらに、サービス開始以来セキュリティ事故0の高セキュリティで、官公庁や金融機関でも愛用されている安心なツールです。フォーム作成でお困りの方はぜひクライゼルをご活用ください。

高機能でカンタン！

Salesforceやkintoneなどの他クラウドサービスとリアルタイム連携できる

Webフォームを作るならクライゼル