ブログデザイン備忘録 ~入力フォームの設置

1. 入力フォームの設置
2. ラジオボタン、チェックボックス、ボタンの設置
3. ラベルによるリンク
4. テキストボックス、送信フォーム、プルダウンメニュー
5. まとめ

1. 入力フォームの設置

　今回はラジオボタン、チェックボックス、クリックボタンなどの入力フォームを設置する方法を紹介する。ホームページでは入力フォームの情報をユーザが送信したときに、情報を収集する、処理を進めるなどあるが、はてなブログ上では特に何かアクションができるわけではない。ただし、Javascriptと組み合わせることで表示処理やブログページの表現を豊富にすることができる。

2. ラジオボタン、チェックボックス、ボタンの設置

　まずラジオボタンをブログ中に設置するには

<div>
<input type="radio" name="color" value="good" checked="checked">Red
<input type="radio" name="color" value="bad">Blue
</div>

Red Blue

input type="radio"とすることでラジオボタンを表示する。checked="checked"は最初からチェックを入れるという設定となる。クリックするとラジオボタンが選択状態になるはずである。

次にチェックボックスは

<div>
<input type="checkbox" name="color" value="good">Red
</div>

Red

構文は上のラジオボタンと同じで、input type=checkbox"とすればチェックボックスが設置される。　ボタンはinput type="button"とすればボタンが配置される。onclick=でクリックされたときの処理関数を指定する。今回はwindow.scroll()を呼び出し、上に戻るように設定している。ユーザ定義の処理をする場合は、Javascriptで処理を定義する必要がある。

<div>
<input type="button" value="上に戻る" onclick=window.scroll(0,50); >
</div>

3. ラベルによるリンク

　ラベルを使用することで、テキストをクリックするとラジオボタンやチェックボックスにチェックを入れることができる。

<div>
<label for="check1" >クリックしてチェック</label>
<input type="checkbox" id="check1">
</div>

<label for="id">で操作されるフォームのidを指定して、操作される側は<input type="checkbox" id="check1">としてidを設定しておく。これで文字上をクリックしてもチェックボックスにチェックが入る。

クリックしてチェック

ラジオボタンでも同様なことができる。

<div>
<label for="radio1" name="dir" >左を選択</label>   <label for="radio2" >右を選択</label><br>
<input type="radio" name="dir" id="radio1" >左
<input type="radio" name="dir"  id="radio2">右
</div>

左を選択右を選択
左右

ところで、テキスト上をクリックで動作するものかどうかユーザに対してわかりにくい。そこでlabelに関してインラインでスタイルを指定する。

<div>
<label for="check2" style="cursor:pointer; text-decoration:underline;" >クリックしてチェック</label>
<input type="checkbox" id="check2">
</div>

クリックしてチェック

テキストにマウスオーバーするとカーソル表示が変わること、テキストの下線を入れることでユーザに対してクリック可能であることを明示した。

4. テキストボックス、送信フォーム、プルダウンメニュー

　テキストボックスを配置するには<input type="text">とする。maxlengthで最大入力文字数、sizeはテキストボックスの長さを指定する。さらに<input type="password">とすればパスワード入力ボックスも設置できる。（今回は実行しない）

名前：

入力テキストに対して送信フォームを設置するには以下のようにする。送信ボタンはダミーで、URLが少し変わるがそれ以外は何も起こらない。テキストに入力した後、リセットボタンを押すと入力したものが消える。

<form>
<p>
テキスト：<input type="text" name="namae" size="15" maxlength="10">
</p>
<p>
<input type="submit" value="送信する">
<input type="reset" value="リセットする">
</p>
</form>

プルダウンメニューは<select> <option>テキスト</option></select>とすることで設置できる。

<p>血液型：<br>
<select name="blood">
<option value="A">A型</option>
<option value="B">B型</option>
<option value="O">O型</option>
<option value="AB">AB型</option>
</select></p>