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">
