初めに!
学習した内容をアウトプットするために記事を書きます。
少しでも参考になるようにわかりやすく書いていきます。
フォームとは?
- クライアント側が情報を入力してサーバーに情報を送信する仕組み。
完成図
コード
<body> <h1>ログインフォーム</h1> <form action="#" method="post"> <input type="text" name="username" placeholder="ユーザーネーム"> <input type="password" name="password" placeholder="パスワード"> <input type="submit" value="ログイン"> </form> </body>
解説
formタグを記述してformの範囲を明確にする。
action属性にはパスを入力するが今回はダミーのパスである#を挿入。
method属性にはデータを送信する役割を持たせるのでpostメソッドを利用する。
今回はユーザーネーム、パスワード、ログインと3つの入力フォームがあるのでそれぞれ準備する。
inputタグの中にはtype属性、name属性、、placeholder属性、value属性がある。
type属性には必要なタイプのフォームに応じて入力する。例えば textであれば短い文字(1行)を入力することができる
name属性はサーバー側プログラムがフォーム側から送られたデータを判別する。
placeholder属性は記入欄に文字を表示させる。
value属性は今回は送信ボタンに付属するので送信ボタンの"送信"を記述するために利用する。
inputタグをformタグないに挿入することでフォームが完成する。
まとめ
入力フォームを作成する基本としてはformタグ中にinputタグを入れることで作成する。
formタグの属性としてはaction属性、method属性がある。
inputタグの属性としてtype属性、name属性、value属性、placeholder属性がある。