36歳がHTMLを勉強してみる_その６
前回に引き続き、HTMLを勉強してきます。
【やったこと】
●Formを使ってみる
●Bootstrapを使ってFormを表示してみる
【参考サイト】
今回はFormについて勉強したいと思います。
Formとは入力・送信フォームを作成する際に使用します。
例えば、ユーザ登録をするとか、問い合わせするときに名前やメールアドレスなどを入力できる画面がありますが、それがFormです。
【Formの使い方】
<form> ～ </form><form>の間に、<input>、<select>などのタグを使い、テキストボックスやサブミットボタンなどのフォーム部品を配置します。
【Formの様々な属性】
フォームに入力されたデータは、送信ボタンを押すことでWebサーバに送信されます。
送信先のURLはaction属性というものを使います。
<form action="送信先URL"> ～ </form>データの送信方法はmethod属性を使います。
<form action="送信先URL" method="post"> ～ </form>method属性のデフォルトは"get"になります。
getで送信されたフォームの内容は、action属性で指定したURLの後ろに「？」をつけて、それ以降に続くクエリとして送信先ページに渡されます。
Yahooのページでgoogleを検索した時のURLです。
searchの後ろに、？がついてgoogleと出てます。
これがgetで送信された内容になります。
postで送信された場合は、URLの後ろにクエリは付かずに、送信内容自体が送信されます。
ちなみに、Webサーバに送信されたデータの処理は、フロント側（HTMLやCSS）ではなく、バックエンド側（PHPやPython）などのサーバサイドで行います。
name属性はフォームに名前を付けることができます。
<form action="送信先URL" name="sample"> ～ </form>名前を利用する意味としては、JavaScriptで要素にアクセスする場合に、この値を利用することができます。
また、input要素でフォームのname属性が付加されていて、対象とする要素のデータに簡単にアクセスできることができます。
その他にも属性がありますが、詳細はタグリファレンスサイトを参照ください。
それでは、実際にどのような動作をするか確認してみます。
●Formを使ってみる
まずは、Bootstrapを使わないフォームを見てみましょう。
ファイル名：myhtml.html
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>習慣</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
</head>
<body>
<form action="" method="post">
<p><label>名前：<input type="text" name="name" size="40"></label></p>
<p><label>血液型：
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>
</label></p>
<fieldset>
<legend>性別</legend>
<p><label><input type="radio" name="sex" value="male">男</label></p>
<p><label><input type="radio" name="sex" value="female">女</label></p>
</fieldset>
<p><label>コメント：<br><textarea name="comments" rows="2" cols="40"></textarea></label></p>
<p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
</form>
</body>
</html>このページを表示すると以下のようになります。
・Bootstrap無し
<input>や<select>についての説明は次回行いますので、今回は説明を省きます。
このフォーム画面だとかなり寂しい感じなのでこれにBootstrapを適用してみます。
●Bootstrapを使ってFormを表示してみる
・Bootstrap有り
デザインがいい感じになりましたね。
Bootstrapを利用するのは簡単で、以前作成したformの中にあるinputタグやselectタグにclassを追加するだけです。
コード：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>習慣</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
</head>
<body>
<form action="" method="post">
<p><label>名前：<input type="text" class="form-control" name="name" size="40"></label></p> #修正
<p><label>血液型：
<select class="form-select" aria-label="sample" name="blood"> #修正
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select>
</label></p>
<fieldset>
<legend>性別</legend>
<p><label><input class="form-check-input" type="radio" name="sex" value="male">男</label></p> #修正
<p><label><input class="form-check-input" type="radio" name="sex" value="female">女</label></p> #修正
</fieldset>
<p><label>コメント：<br><textarea class="form-control" name="comments" rows="2" cols="40"></textarea></label></p> #修正
<p><input class="btn btn-primary" type="submit" value="送信"><input class="btn btn-secondary" type="reset" value="リセット"></p> #修正
</form>
</body>
</html>Bootstrapを使うとclassを追加するだけで簡単にデザインが変更できるので是非使ってみましょう。
本日はここまでです。
ありがとうございました。