Webデザインを学ぶ

Wedデザイン初心者、ただいま勉強中です!

form-マークアップ

フォームエリアの設定

f:id:hourin-g0913:20160221132034p:plain

action属性
データの送信先。
method属性
データの送信方法。get(データをURLの一部として送信)またはpost(データを本文として送信)を選ぶ。

input要素

input要素とはデータを入力するための要素。type属性を使うことで、入力場所のデザインを様々な姿に変えることが出来る。

テキストフィールド(シングルライン)

f:id:hourin-g0913:20160221133704p:plain

f:id:hourin-g0913:20160221135126p:plain

<input type="text">で文字を打つスペースが出来る。placeholderを入れると、利用者の入力前までに文字を表示させることが可能。

ラジオボタン

f:id:hourin-g0913:20160221142312p:plain

f:id:hourin-g0913:20160221140023p:plain

<input type="radio">で複数の選択肢の中から一つだけ選択する入力場所ができる。checkedによって、すでに選択されている状態をつくれる。

チェックボックス

f:id:hourin-g0913:20160221142345p:plain

f:id:hourin-g0913:20160221141823p:plain

<input type="checkbox">で複数の選択肢の中から複数選択する入力場所ができる。id名を付けてそれをlabel要素で囲むと、チェックボックスの反応する範囲が文字分追加される。

プルダウンメニュー

f:id:hourin-g0913:20160221143548p:plain

f:id:hourin-g0913:20160221143210p:plain

select要素で選択肢リストから選ぶ入力場所ができる。選択肢はoption要素で作成する。

テキストフィールド(マルチライン

f:id:hourin-g0913:20160221145631p:plain

f:id:hourin-g0913:20160221145615p:plain

<td>に<textarea>という属性をいれることによって、複数行入力できる入力場所ができる。row属性とcols属性で表示上の入力行数と字数を決められる。実際にはこの数値を超えて入力することが可能。

送信ボタン

f:id:hourin-g0913:20160221150313p:plain

f:id:hourin-g0913:20160221150302p:plain

<th>にcolspanを入れることで、ニ列を一列にできる。type属性にはsubmitとrecetの二種類がある。リセットボタンをつくることも可能ではある。しかし、標準では入れないほうが良い。実際に利用者が使っている姿を想像してみる。そうすると、誤ってリセットボタンを押してしまった時、もう一度最初から入力しなくてはいけないことが利用者にとってストレスになってしまう。そうなると利用者がページから離れてしまう可能性がある。だからリセットボタンは作らない方が良い。