今回、HTML学習日記Part4では、いつも通り、Codecademyで学習した内容についてアウトプットしていこうと思います。
では、今回学習した内容について、以下に書いていきます。
本日は、formについて学習しました。formというのは、インターネット上のアンケート用紙みたいなもので、今回は、その作り方について学習しました。
まず、formを作成するには、<form> elementを用い、以下のように、使用します
<form action=”/example.html” method=”POST”>
</form>
<form> elementには、action attributeと、method attributeがあり、action attributeは、formの送信先を指定し、method attributeは、送信する時の送信方法を指定します。
また、formの内容は、formの中に書き込みます。
formに、ユーザーが入力出来るように、入力欄を作成する場合は、<input> elementを用います。そして、<input> elementの中に、type attributeとname attributeとvalue attributeを書き込み以下のようにします。
<input type=”text” name=”A” value=”aiueo” id=hiragana>
この場合は欄の中にaiueoが書き込まれた状態で、入力欄を作成されます。
次に、設置された欄の中に、何を書き込むのかのラベルを付け加えるために、以下のような<label> elementを設置します。
<label for=”hiragana”>あ行</label>
<label> elementの中には、for attributeを書き込み、＝の後は、id attributeの＝の後と一致させなければなりません。また、今回は、あ行がラベルとして、画面に表示されます。
次に、欄にパスワード等の機密情報を書き込む場合は、type attributeの＝の後を“password”に変えて以下のようにします。
<input type=”password” name=”A” id=hiragana>
こうすると、打ち込んだ情報は●として、画面に表示されます。
次に、個数などの数値のみをユーザーに入力してもらいたい場合は、type attributeの＝の後を“number”に変えて以下のようにします。
<input id=”apple” name=”apple” type=”number” step=”1″>
また、step attributeは、＝の数分増減させるように、制御させます。
次に、音量コントロールのようなスライダーを用いて、音量を調節するようなものを作成する場合は、 type attributeの＝の後を“range”に変えて 以下のようにします。
<input id=”volume” name=”volume” type=”range” min=”0″ max=”5″ step=”0.5″>
また、min attributeは、最小値を意味し、max attributeは、最大値を意味します。
次に、formにチェックボックスを追加したい場合は、 type attributeの＝の後を“checkbox”に変えて以下のようにします。
<input id=”apple” name=”fruits” type=”checkbox” value=”apple” >
次に、ユーザーに同意する、同意しないといった、複数の選択肢から一つだけ選択させる場合は、 type attributeの＝の後を“radio”に変えて以下のようにします。
<input id=”no” type=”radio” name=”select” value=”no”>
これを複数個作ることによって、複数の選択肢から一つだけ選択させます。また、その場合は、name attributeを統一させなければなりません。
また、メニューのような、多くの中から一つだけ選択させる場合は、<select> elementと、 <option> element を用いると良いです。
<select id=”lunch” name=”lunch”>
<option value=”pizza”>Pizza</option>
<option value=”curry”>Curry</option>
</select>
この場合、PizzaかCurryのどちらかを選択することが出来ます。
次に、国を選択する場合などのたくさんの選択肢の内から選択する場合は、<datalist> elementと、 <option> element を用いると良いです。
<datalist id=”country”>
<option value=”Japan”></option>
<option value=”China”></option>
</datalist>
こうすると、空欄に自分で自由に打ち込むことが出来、Jと打ち込めば、候補にJapanと出てきます。
次に、ユーザーにお問合せが出来るようなformを作成したい場合は、<textarea> elementを用いて、以下のようにします。
<textarea id=”blog” name=”blog” rows=”5″ cols=”30″></textarea>
このようにすると、5行30列の空欄が作成され、rows attributeは、行数を意味し、cols attributeは、列数を意味します。
最後に、ユーザーに打ち込んでもらった、formを提出してもらうために、type attributeの＝の後を“submit”に変えて以下のようにします。
<input type=”submit” value=”Send”>
このようにすると、formを提出することが出来ます。また、valueの名前を書き換えると、ボタンに表示される名前も変更することが出来ます。
以上が、今回HTMLで学習した内容でした！（今回は、結構大変でした）
段々と学習していく内容も難しくなっているので、プログラミング学習する時間も長くなってきて、毎日ブログを書くのが大変になってきました。
Codecademy https://www.codecademy.com/
コメント