よもやまチョモランマ

メールフォームのカスタマイズあれこれ

何度も作っているのに、毎回ひとつずつ、気に食わないところを直してゆく感じがもどかしい。

今回もググりまくりました。
ひとつひとつ記事にしてたらきりがないので、課題と解決先リンクを。

チェックボックスやラジオボタンは文字をクリックしても反応するようにしたい
【参考】部品とラベルを関連付ける
<label>ではさむことで解決

項目の分の途中で改行させたくない
【参考】リキッド・レイアウトでチェックボックスを綺麗に並べる
<label>に「display: inline-block;」あてるだけ

郵便番号入れたら住所が自動で出るようにしたい
【参考】郵便番号から住所をフォームに自動入力するJS
JSだけどね。「zip2addr」をダウンロードしてJSフォルダにつっこんで、コード2行コピペするだけだし。

グレーの先入れ文字の色を変えたり、何か文字入れなきゃ消えないのをクリックしただけで消えるようにしたり
【参考】placeholder(プレースホルダ)の表示とCSSでの装飾方法

入力欄がスマホのときはみ出すのをなんとかしたい
【参考】スマホ対応じゃない問い合わせフォームを「とりあえず」レスポンシブにする方法
幅100%にできるんですね

テキストエリアをはみ出ないようにする
【参考】【CSS】テキストエリア等がはみ出ない様にする
「box-sizing:border-box;」あてるだけ
上のとどっちがいいのかな?要検証