More than 5 years have passed since last update.

入力フォーム

Last updated at 2018-02-27Posted at 2016-11-20

留意点

widthを設定、文字を大きく、paddingを必ず入れる。
inputタグのtype属性email,tel,numberなど積極的に使う
http://www.htmq.com/html5/input.shtml
入力必須項目は required
http://www.htmq.com/html5/input_required.shtml
デフォルトでフォーカスを当てたいフォームには autofocus
http://www.htmq.com/html5/input_autofocus.shtml
placeholderに入りきらない複数の例がある場合 autocomplete を使う
http://www.htmq.com/html5/input_autocomplete.shtml
radioボタンのサイズはfont-sizeで調整、またはwidth,heightで調整
http://qiita.com/takuya-andou/items/7487424346a69ad02690
スマホで「数字+ハイフン(-)」が電話番号と認識されることがあるので、
それを避けたい場合は content="telephone=no"
http://www.tagindex.com/html5/page/meta_format_detection.html
入力時にでる青いアウトラインは消した方が美しい outline: none;
iOSでinputに角丸とグラデーションが自動で反映されないようにする
http://aoicotori.hatenablog.com/entry/iphone-button-css
フォームを囲む fieldset
http://www.htmq.com/html5/fieldset.shtml
submitしてもページ遷移しないようにreturn false;する
https://hacknote.jp/archives/605/
enterで誤送信しないようにする
https://allabout.co.jp/gm/gc/23972/2/

基本はkeyupで取得。
keydownだとiOSとAndroidでとれる文字が1文字ずれる。
changeだとblurした瞬間じゃないととれない。

iPhoneの完了ボタンはkeydown,keyupではなく、
focusoutで取得する。

input type="email" 、input type="url" とかにしてるとAndroidでは親切に変換候補を出してくれて、決まりきるまでenterが押されない状態になってしまう。余計なおせっかい。

厳密に入力文字を峻別したいのなら
input type="text"にしてjsで制御すること

$input.on('keyup focusout', () => {
    $target.text( $input.val() );
})

ダイアログボックスを表示して取得する

var nickname = prompt("ニックネームを入力してください", "NICKNAME");
document.write(nickname);

var ans;
$('#button').on('click', function(){
  isYes = confirm('are u ready?');
  yourAns = isYes ? 'yes!' : 'no!';
  document.write(yourAns);
})

参考
HTML5＋CSS3で作る魅せるiPhoneサイト
 inputタグの便利な属性まとめてみた
 今どきの入力フォームはこう書く！HTMLコーダーが抑えるべきinputタグの書き方まとめ