初心者がゼロから始める【HTML】プログラミング【学習7日目】ログイン画面とお問い合わせフォームを作ってみた

こんにちは、ryomaです。

今回はHTMLでログイン画面とお問い合わせフォームを作ることを学習したので、その内容をまとめていきたいと思います。

SNSにしてもAmazonなどの販売サイトでも必ず見かけるもので、『自分で作れるようになるのか！』と思うとワクワクしてしまいました。
実際にサービスを作った時にも、会員登録やログイン情報が必要なものであれば必ず使うものになってくるので、しっかりとマスターしたいところです。

さっそくいってみましょう！

ログイン画面作ってみた

ブラウザ画面で表示するとこちら

ユーザーネーム登録の枠ができました。
"ユーザーネーム"の部分を変更することで、例えばアカウント名などに変更することも可能です。

placeholder="この部分"を変更することで自由に表示を変えることができます。

続いてパスワードの入力枠も作っていきます。

そしてブラウザ画面がこちら

パスワードが追加されました！

それではログインボタンも作っていきます。

ブラウザ画面がこちら

ログインフォーム（見た目だけ）の完成です。

実際のログインフォームは今の知識では作れませんが、いずれ自分で作成できるようにレベルアップしていきたいと思います。

お問い合わせフォームを作ってみよう

次はお問い合わせフォームを作っていこうと思います。
こちらも、サーバーの用意などがあるわけではないので見た目だけとなってしまいますが、『普段見ているものを自分で作れる』ってとても楽しいし充実感があります！

ブラウザ画面がこちら

自分で作った時は思わず「お〜見たことあるやつだ！」ってなりました。
自分の頭にあるものを、ネット上ですが実際に形にすることができるのって『プログラミングの最大の面白さ』だと思います。

このままメールアドレス入力欄も追加していきます。

ブラウザ画面がこちら

メールアドレスの欄が追加されました！

続いて、住んでる場所や性別なども追加していきます。

ブラウザ画面がこちら

お住まいの地域の下に<select>コードで矢印が出てきましたが、地域が登録されていないので選択肢がありません。
今からこれに地方名を追加していきます。

コードを入れたので、ブラウザ画面で確認していきます

選択肢ができました。
<option value="地域名">地域名</option>を追加していくことで、どんどん増やすことができます。

このコードを追加することで、プルダウンメニューに『選択してください』を初期設定として追加することができます。

上記のコードを消すと『選択してください』が『北海道』へ変わるので必要に応じて使い分けてください。

続いて、性別の選択肢を入れていきます。

ブラウザ画面がこちら

男性のコードに『cheked』が入ってることで、初期は男性にチェックが入っています。

この部分を消すと、クリックするまでチェックが入らなくなります。

次はお問い合わせ内容入力欄の作成です。

ブラウザ画面がこちら

お問い合わせ内容入力欄が追加されました。
徐々にサイトのお問い合わせフォームに近づいてきたので、さらにプライバシーポリシーの同意と送信ボタンを追加します。

ブラウザで確認していきます。

同意とチェックボックスが表示されています。

それでは最後に送信ボタンを追加します。

ブラウザで確認していきます

送信ボタンが入りました！

完成したお問い合わせフォーム画面がこちら

まとめ

今回はログインフォームとお問い合わせフォームを学習しました。
どちらもサイトでよく見るものです。

まだHTMLの学習だけなので、サーバーと応答させることはできませんがいずれ『ログインボタン』を押して『送信ボタン』を押してサーバーと通信していけるところまでを身につけていきたいと思います。

今日が人生で一番若い日です。
知識は学んで自分のものにすれば、一生使っていけます。学習習慣を継続してプログラミングでの副業月収5万円をまずは目指したいと思います！