【HTML】サイトにテキストボックスを付けたいって時の設定方法
こんにちは! あますた(@amaguristar)です。
サイトに「検索ボックス作成したい!」って時ありませんか?その為には文字の入力をする為の「テキストボックス」を表示しないといけません。今回はそんな時の為の簡単なテキストボックスの設定方法をメモ。
formの基本
データの送信先や送信形式を設定しよう!
テキストボックスを作成するにあたり、「どこに・どんな形式でデータを送信するか」の設定が必要です。それがフォームの設定。設定方法は簡単。
〜〜ここにテキストボックス等入力関連の処理を記述〜〜
</form>
と、<form>タグを設定するだけ。各属性を説明すると
例) action=”./info/php” と「”(ダブルクオーテーション)」で囲む
※送信先が決まってない時または同じページにデータを送信する場合は「#」を入力
POST : 入力されたフォームデータを本文としてサーバーのプログラムへ送信。
GET: action属性で指定したアドレスのあとに[?]で区切ったあとにデータを送信。
送信方法は、基本的にメールフォーム等匿名性の高い情報の時は「POST」を使用。観られても問題のない情報--地図上の位置を住所検索する時の住所データ等--は「GET」を使用と使い分けが有るようですが、とりあえず迷ったらPOSTを使用しておけば間違い無いと思います。
form部品設置
テキストフィールド(ボックス)を設置
名前や住所、電話番号等短いテキストを入力する為のボックスを作成したい時に<input>タグを使用します。基本は<form>タグ内に下記を追加。
上記を実行すると下記フォームが表示されます。
もちろんこのままだと全く意味がありません。実際に使用する際はデータを送信する必要が有るので送信ボタンを作成する必要があります。
送信ボタン設置
送信ボタンの設置は基本的に下記の2種類の方法があります。
上記を実際に記述すると下記のようになります。
結果:
結果:
見た目は全く同じです。「じゃあなんで紹介したの?」って方、ごもっともです。基本的には<input>タグの方で問題無いのですが、中には「送信ボタンが押された時に何らかの情報を持たせて送信したい」って時が有るので一応紹介。
ここでいう「何らかの情報」とは、送信ボタンが押された時に何番のボタンが押された等が挙げられます。詳細に説明すると長くなってしまうので、ここでは「なんかわからないけど2パターン有るんだ」位気軽にスルーして下さい。
ちなみに上の<button>タグの例では、「btnPush」という名前に「0」という値が入って送信されます。
まとめ
入力関連のフォームは<form>タグの間に部品を追加して記述する。
~~フォーム部品~~
</form>
methodには、「POST」と「GET」を設定可能。迷ったら基本「POST」を選択。actionには、データを送信するアドレスを記載(https://~等)。送信先が未定もしくは、フォームを記載しているページ自身にデータを送信したい場合は「#」を入力。
テキストフィールドを入力するには、
送信ボタンは下記の2種類。
送信されたデータの取得方法については、後日改めて説明します。とりあえず今回のことを踏まえて簡単なサンプルを下記に掲載。
コードは、
名前入力: <input type=”text” name=”name_box”>
<input type=”submit” value=”送信”>
</form>