あまめも

【HTML】サイトにテキストボックスを付けたいって時の設定方法

こんにちは! あますた(@amaguristar)です。

サイトに「検索ボックス作成したい!」って時ありませんか?その為には文字の入力をする為の「テキストボックス」を表示しないといけません。今回はそんな時の為の簡単なテキストボックスの設定方法をメモ。

目次

 

formの基本

データの送信先や送信形式を設定しよう!

テキストボックスを作成するにあたり、「どこに・どんな形式でデータを送信するか」の設定が必要です。それがフォームの設定。設定方法は簡単。

<form method=”POST” action=”#”>
   〜〜ここにテキストボックス等入力関連の処理を記述〜〜
</form>

と、<form>タグを設定するだけ。各属性を説明すると

action
データを送信するページのアドレス
例) action=”./info/php” と「”(ダブルクオーテーション)」で囲む
※送信先が決まってない時または同じページにデータを送信する場合は「#」を入力
method
データ送信方法の設定
POST : 入力されたフォームデータを本文としてサーバーのプログラムへ送信。
GET: action属性で指定したアドレスのあとに[?]で区切ったあとにデータを送信。

送信方法は、基本的にメールフォーム等匿名性の高い情報の時は「POST」を使用。観られても問題のない情報--地図上の位置を住所検索する時の住所データ等--は「GET」を使用と使い分けが有るようですが、とりあえず迷ったらPOSTを使用しておけば間違い無いと思います。

form部品設置

テキストフィールド(ボックス)を設置

名前や住所、電話番号等短いテキストを入力する為のボックスを作成したい時に<input>タグを使用します。基本は<form>タグ内に下記を追加。

<input type=”text” name=”送信時の名前”>

上記を実行すると下記フォームが表示されます。

もちろんこのままだと全く意味がありません。実際に使用する際はデータを送信する必要が有るので送信ボタンを作成する必要があります。

送信ボタン設置

送信ボタンの設置は基本的に下記の2種類の方法があります。

<input type=”submit” value=”ボタンに表示する文字”>
<button type=”submit” name=”送信時の名前” value=”送信時の値”>ボタンに表示する文字</button>

上記を実際に記述すると下記のようになります。

入力:<input type=”submit” value=”送信”>
結果:
入力:<button type=”submit” name=”btnPush” value=”0″>送信</button>
結果:

見た目は全く同じです。「じゃあなんで紹介したの?」って方、ごもっともです。基本的には<input>タグの方で問題無いのですが、中には「送信ボタンが押された時に何らかの情報を持たせて送信したい」って時が有るので一応紹介。

ここでいう「何らかの情報」とは、送信ボタンが押された時に何番のボタンが押された等が挙げられます。詳細に説明すると長くなってしまうので、ここでは「なんかわからないけど2パターン有るんだ」位気軽にスルーして下さい。

ちなみに上の<button>タグの例では、「btnPush」という名前に「0」という値が入って送信されます。

まとめ

入力関連のフォームは<form>タグの間に部品を追加して記述する。

<form method=”データの送信方法” action=”データを送信するアドレス”>
  ~~フォーム部品~~
</form>

methodには、「POST」と「GET」を設定可能。迷ったら基本「POST」を選択。actionには、データを送信するアドレスを記載(https://~等)。送信先が未定もしくは、フォームを記載しているページ自身にデータを送信したい場合は「#」を入力。

テキストフィールドを入力するには、

<input type=”text” name=”データを送信時の名前”>

送信ボタンは下記の2種類。

<input type=”submit” value=”ボタンに表示する文字”>
<button type=”submit” name=”送信時の名前” value=”送信時の値”>ボタンに表示する文字</button>

送信されたデータの取得方法については、後日改めて説明します。とりあえず今回のことを踏まえて簡単なサンプルを下記に掲載。

サンプル:
名前入力:

コードは、

<form action=”#” method=”POST”>
 名前入力: <input type=”text” name=”name_box”>
 <input type=”submit” value=”送信”>
</form>

関連記事

  1. 知ってました?iPhoneに自動で行動記録を取られてるって!しか…

  2. 色々とあったのでWordPressをエディタで書こうとしてとりあ…

  3. ブログに「目次必要かな?」と思ったのでサクッとローテクで作ってみ…

  4. 「PayPal」使ってみたらすごい便利!めっちゃ簡単で驚いた。

  5. iPhone無くした?って時にiCloudにある『iPhoneを…

  6. [甘]知らなかった!『Evernote』で”過去ログ”を参照する…

こんなメモもありますよ♪

Twitter

ページ上部へ戻る