タグ input 要素
人気順 10 users 50 users 100 users 500 users 1000 userslabel で input[type="file"] を装飾するな
何が問題か 上記の方法は input 要素を display: none で非表示にし、label 要素を使ってヒット領域を拡大させて「ファイルを選択」ボタンを表現するという方法ですが、この方法ではフォーカスが当たりません。また、tabindex 属性に非負の値を設定しフォーカスを当てられるようにしても label は clickable な要素では... 続きを読む
HTMLのpattern属性とJavaScript正規表現のunicodeオプション - Hatena Developer Blog
こんにちは、Webアプリケーションエンジニアの id:nanto_vi です。みなさん HTMLのフォーム検証機能 は使っていますか? 近年は各Webブラウザの対応も進み、お手軽にフォームの利便性を高められるようになっています。 そんなフォーム検証機能のひとつが input 要素の pattern 属性です。 pattern 属性の値にJavaScriptの正規表現パターンを指定することで、ユーザ... 続きを読む
Rails の `utf8=✓` の歴史と消し方と snowman ☃ - Qiita
Rails の form_tag や form_for で form を作成すると <input name="utf8" type="hidden" value="✓"> という input 要素が自動で追加されて、submit すると utf8=✓ というパラメータが付いてくる。これの歴史と消し方を調べた。 Rails3 で、Internet Explorer 5、6、7、8 にパラメータを U... 続きを読む
HTML5 input type="range" で作る 「へぇボタン」 | WWW WATCH
HTML5 で input 要素の type 属性として追加された 「range」 は、数値を表す文字列をセットするための、スライダー形式やそれに準じた入力コントロールを作りますが、この input type="range" でちょっとしたお遊び。 昔の人気番組、「トリビアの泉」 でおなじみの、「へぇボタン」 を、input type="range" と CSS、簡単な JavaScript で作... 続きを読む
CSS でフォームの値を読む
これは CSS Programming Advent Calendar 2012 の 21 日目の記事です。がすでに 22 日になってしまいました。ごめんなさい。 7 日目の記事(ドラッグをキメる) で、input 要素の value の値は「CSS で検知できない」と書きましたが、嘘です。ごめんなさい。 それ実は CSS でできるよ! Client-Side Form Validation の仕... 続きを読む
JavaScript でプレースホルダつき入力欄を作る - blog.8-p.info
JavaScript で input 要素にプレースホルダをつけるようにして、このブログの右上につけてみた。 ユーザーが入力するべきものを入力欄自身に表示するこのインターフェース、調べたら Input Prompt と呼ぶ向きもあるらしい。 ここではその実装と設計 (というほどおおげさなものじゃないけど) について、制作過程の細々とした考えを文章化してみます。 インターフェースを決める どこかで見... 続きを読む
naoyaのはてなダイアリー - XMLHttpRequest でファイルのアップロードができないか?
■ XMLHttpRequest でファイルのアップロードができないか? ブックマーク経由でみかけたCodeWeb: 画像をアップロードする前にサムネイルを表示させる。 では、JavaScript を使ってファイルをアップロードする前にプレビューする方法が紹介されてました。input type="file" な input 要素の onchange ハンドラでごにょるというもの。 一方で、プレビュ... 続きを読む
submit ボタン disable 技の罠 - naoyaのはてなダイアリー
昨日のonsubmit で submit ボタンを disable にしてユーザビリティを良くするにはちょっとした罠があって、それに気付かずに使うとはまってしまうかもしれないので、それもちょっと書いておく、というか今日僕自身がはまったわけだが。罠というのは、type="submit" な input 要素、つまりは submit ボタンを onsubmit ハンドラで disable するまでは良... 続きを読む