php と html による入力フォームの作成:
form, input, データベース連携など

UB3/informatics/php/input

このページの最終更新日: 2024/09/30

概要: html で入力欄を作成する
form tag
input tag
textarea tag

html で入力欄を作成する

ウェブサイトを訪れた人に何かを入力してもらい、確認画面を表示する作業を考える。考慮すべき点は以下である。

入力画面は html である。よって入力欄を作るのは html。タグは以下で述べるように form や input を使う。
確認画面も html であるが、そのコンテンツは入力された内容によって異なる。したがって、入力の内容を反映した html ファイルを作成する必要がある。この作業を行うために php ファイルが必要となる。

form tag

まずは html に form tag を導入する。これは入力データを php ファイルへ送るためのタグであり、php ファイルの名前を指定することになる。

入力を受け取って処理する php ファイルの名前を仮に receive.php とすると、下記の form タグでそのファイルに情報を送ることができる。データ送信先を URI という (2)。

form タグのオプションを表にしておく。

method

php にデータを受け渡す方法を指定する。post および get の 2 種があり、必須ではない (2)。

post: 入力内容が URI とは別の場所に保管されてデータが送信される。安全性が高いらしい (2)。
get: 入力内容が URI と一緒に送信される。送信先のサーバーに入力内容がデータとして残ってしまうこともあるらしい。詳しいことはよくわからないが、post にしておく方が良さそうだ。

action

form タグに必須の属性 (2)。ここでは php ファイルを指定しているが、たとえば CGI プログラムなどを指定することもできる。

CGI は common gateway interface の略であり、Ruby, Java, C 言語などを使って記述できる。php よりもさらに応用範囲が広くなると思われる。

次に、input タグで入力欄を作成する。

input tag

input tag は、実際に入力欄を作成するためのタグである。基本的な形式は以下の通りで、入力欄は 1 行限定である。もっと幅の広い入力欄を作りたいときは textarea タグを使用する。

form の閉じタグの前にくることを強調するために、form タグとともに記述する。緑の部分が input での指定項目である。

これで、入力欄と送信ボタンが表示される。実際にタグとして入力したのが以下。入力欄と送信ボタンが見えることと思う。

なお php ファイルがない状態で入力欄だけ作っておくと、「送信」後に File not found のエラーになる。この入力欄はそういう状態になっているので、試しに「送信」をクリックしてみてほしい。

input タグのオプションを表にしておく (1,3)。

type	入力欄のタイプを指定する。 text: テキスト入力欄。 submit: 送信ボタン。value で送信ボタンをどのようにラベルするかを指定できる。 password: 入力された内容が * などで表示される。 radio: ラジオボタン。選択肢の中から一つだけ選ぶことができる。 checkbox**: チェックボックス。
checked	type が checkbox のときにのみ有効。checked="checked" とすると、初期値で選択された状態になる。
name	送信欄の名前を指定する。入力した内容がこの名前でラベルされ、php ファイルで処理されるようなイメージ。
required	送信欄の入力を必須にする。
placeholder	<input placeholder="ここに入力してください"> のようにして初期値を指定する。ユーザーによる入力が始まると、この文字は表示されなくなる。下の value の説明にあるように、初期値のオプションというよりは入力欄に説明を記入するものと考える方が良さそうだ。
value	<input value="初期値"> として初期値を指定する。placeholder との違いがあまり分からないが、value の場合はそのまま「送信」できる値が表示されるのに対し、placeholder の文字は半透明で、そのまま送信することができなかった。
autofocus	ページが表示された際に、入力欄に自動的にカーソルが表示され入力可能となる。複数ある場合は最初のものが優先される。

textarea tag

input タグのテキスト入力欄は、上の例でみるように 1 行のみである。場合によっては複数行の入力欄を作りたい。この場合には textarea タグを用いる。input タグと同様、form タグの中に来る。

これで入力欄と送信ボタンが以下のように表示される。input タグには閉じタグが不要だが、textarea タグでは必須ではないにせよあった方が良さそうである。私のテキストエディタは閉じタグがないとエラーメッセージを出す。

次に、php による入力情報の処理のページで入力情報を処理する receive.php について解説する。

References

柏岡、池田. 2017. いちばんやさしい PHP の教本.

タイトルで「いちばんやさしい」と言っているだけあって php の独習に最適 な本だと思う。2015 年の比較的新しい本で、最新のアップデートまではカバーしていないものの、基本的なことは全て載っている。

テキストエディタのインストール、html 文法についても基本の解説があるのが助かる。これを読めば html と php を使ったウェブサイトが作れるようになり、さらに入力フォームの作り方、データベース MySQL との連携まで一通りできるようになるだろう。

実例は、ブラウザを利用した料理レシピアプリ。データの入力、表示、変更などの基本性能が全てあるので、他のプログラムを組むときにも応用しやすい。

formタグのaction,method属性の使い方と特性〜html,slimでの記述方法〜 Link: Last access 2018/12/20.
inputタグの便利な属性まとめてみた. Link: Last access 2018/12/20.

コメント欄

サーバー移転のため、コメント欄は一時閉鎖中です。サイドバーから「管理人への質問」へどうぞ。