【HTML講座⑤まとめその2】「入力フォーム」をゼロから学びました

PR

第5回まとめの後半です。

入力フォームを作成する・・・<form><input><select><textarea>タグ

以下写真のような入力フォームについて学びました。

  • 名前・・テキスト40バイトの空欄
  • 性別・・男女どちらか選択
  • 好きな性別・・好きなもの複数選択可
  • 血液型・・セレクトボックス
  • 備考欄・・複数行の記入欄
  • 送るよー・・送信ボタン
  • 間違えたのでクリア・・リセットボタン

form・・・文字を入力できるハコを作成

この中にこれから紹介するいろんな入力フォームを作成していきます。

<form>

          <input type=”text” name=”namae” size=“40”>      ←一行入力フォーム、(氏名、sizeは40バイトの意味)

 

</form>

radio・・・一個しか選べない選択肢ボタン

性別、男か女かどちらか一方を選ぶ場合。

  <form>

     

          <div>性別:<input type=”radio” name=”seibetsu” value=”otoko”>男 

          <input type=”radio” name=”seibetsu” value=”otoko”>女</div>

</form>

 

checkbox・・・複数選択肢にチェック可能

これに対し、checkboxは、複数選択肢にチェック可能となります。

以下は、「好きな性別」として、「男」にも「女」にもチェックが可能とした場合の書き方です。

</div>

<div>好きな性別:

<input type=”checkbox” name=”seibetsu1″ value=”otoko”>男

<input type=”checkbox” name=”seibetsu2″ value=”otoko”>女

</div>

select・・・セレクトボックスを作成する

▼をクリックしすると、選択肢がプルダウンされる形式の「セレクトボックス」を作ることができます。

<select>には閉じタグ</select>があります。<select>~</select>の範囲内で選択肢を指定します。

選択肢を指定するのは<option value>です。

<div>血液型

<select name=”ketsueki”>

<option value=”A”>A型</option>

<option value=”B”>B型</option>

<option value=”O”>O型</option>

<option value=”AB”>AB型</option>

</select>

</div>

textarea・・・複数行の入力エリア

rows属性とcols属性が必須の属性です。 この2つの属性で入力フィールドの高さと横幅が決まります。

<div>備考欄:

<textarea name=”bikou” rows=”4″ cols=”40″></textarea>

</div>

 

submit・・・送信ボタン、reset=リセットボタン

入力フォームに入力後、「送信」したり、一度リセットして入力し直すときに使います。

<input type=”submit” value=”送るよー”>

<input type=”reset” value=”間違えたのでクリア”>

 

セレクトボックスとかがちゃんとできたりすると嬉しいです。

引き続き頑張ります^^

PR

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です