input
■概要
input要素はhtml内に入力項目を表示することができる要素です。
そこに入力された情報はサーバーに送信しDBへ登録したりします。
入力項目のtype属性に種類の指定をすることで変更可能です。
この属性には複数の種類が用意されていていますので
次の「■type属性」項目で説明します。
●注意点
入力した内容をサーバーに送信するには以下のようにform要素内で
input要素を使用する必要があります。
<form action="URL" method="post">
<input type="text" name="name">
<input type="submit">
</form>
■type属性
input要素で入力できる項目は複数あり、テキストやパスワード、
ラジオボタンなどがあります。
送信ボタンなどもこのinput要素のtype属性に含まれます。
●テキスト入力
名前入力など、短い文字を入力送信したい場合は
「text」属性を使用します。
※設定できる属性は一部のみ紹介しています。
・書式例
<input type="text" name="name" value="入力" size="20" maxlength="10">
・名前設定
項目に名前を設定したい場合は「name」属性を使用します。
データを送信する際にこの属性はとても重要です。
・書式例
<input type="text" name="name">
・値設定
入力項目に最初から文字を設定しておきたい場合や
入力された値を指定したい場合などは
「value」属性を使用します。
・書式例
<input type="text" value="ここに入力">
・サイズ指定
入力する項目のサイズを調整したい場合は「size」属性を使用します。
・書式例
<input type="text" size="20">
・文字数指定
入力する文字数を制限したい場合は「maxlength」属性を使用します。
・書式例
<input type="text" maxlength="10">
●数値入力
文字ではなく数値のみを入力したい場合は「number」属性を使用します。
※設定できる属性は一部のみ紹介しています。
・書式例
<input type="number" name="number" value="0" min="0" max="10">
・名前設定
項目に名前を設定したい場合は「name」属性を使用します。
データを送信する際にこの属性はとても重要です。
・書式例
<input type="number" name="number">
・値設定
入力項目に最初から文字を設定しておきたい場合や
入力された値を指定したい場合などは
「value」属性を使用します。
・書式例
<input type="number" value="0">
・範囲指定
入力する値に対して範囲を指定したい場合は「max」属性と
「min」属性を使用します。
max属性が最大値、min属性が最小値の指定です。
・書式例
<input type="number" min="0" max="10">
・範囲外指定
範囲外の値を指定したことの通知は
データを送信した際に行われます。
●送信ボタン
inputで入力されたデータを送信する際は「submit」属性を使用します。
この属性を使用するとHTML上にボタンが表示され、
そのボタンをクリックすることでformタグ内で設定した
input要素の入力内容を送信してくれます。
・書式例
<input type="submit" name="submit_button" value="送信">
・名前
ボタンに名前を設定したい場合は「name」属性を使用します。
・書式例
<input type="submit" name="button">
・表示テキスト
ボタンに表示されているテキストを指定したい場合は
「value」属性を使用します。
・書式例
<input type="submit" value="OK">