label で input[type="file"] を装飾するな

2022/02/28 50 users input Label File None display

何が問題か 上記の方法は input 要素を display: none で非表示にし、label 要素を使ってヒット領域を拡大させて「ファイルを選択」ボタンを表現するという方法ですが、この方法ではフォーカスが当たりません。また、tabindex 属性に非負の値を設定しフォーカスを当てられるようにしても label は clickable な要素では... 続きを読む

HTMLのpattern属性とJavaScript正規表現のunicodeオプション - Hatena Developer Blog

2016/04/28 152 users pattern HTML nanto_vi ユーザ 属性

こんにちは、Webアプリケーションエンジニアの id:nanto_vi です。みなさん HTMLのフォーム検証機能 は使っていますか? 近年は各Webブラウザの対応も進み、お手軽にフォームの利便性を高められるようになっています。 そんなフォーム検証機能のひとつが input 要素の pattern 属性です。 pattern 属性の値にJavaScriptの正規表現パターンを指定することで、ユーザ... 続きを読む

Rails の `utf8=✓` の歴史と消し方と snowman ☃ - Qiita

2015/06/08 58 users Hidden submit snowman Form type

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

2013/05/15 36 users Range トリビア type CSS input type

HTML5 で input 要素の type 属性として追加された 「range」 は、数値を表す文字列をセットするための、スライダー形式やそれに準じた入力コントロールを作りますが、この input type="range" でちょっとしたお遊び。 昔の人気番組、「トリビアの泉」 でおなじみの、「へぇボタン」 を、input type="range" と CSS、簡単な JavaScript で作... 続きを読む

CSS でフォームの値を読む

2012/12/21 38 users CSS value ドラッグ フォーム

これは CSS Programming Advent Calendar 2012 の 21 日目の記事です。がすでに 22 日になってしまいました。ごめんなさい。 7 日目の記事（ドラッグをキメる） で、input 要素の value の値は「CSS で検知できない」と書きましたが、嘘です。ごめんなさい。 それ実は CSS でできるよ！ Client-Side Form Validation の仕... 続きを読む

JavaScript でプレースホルダつき入力欄を作る - blog.8-p.info

2009/03/08 189 users 8-p.info JavaScript プレースホルダ 実装

JavaScript で input 要素にプレースホルダをつけるようにして、このブログの右上につけてみた。 ユーザーが入力するべきものを入力欄自身に表示するこのインターフェース、調べたら Input Prompt と呼ぶ向きもあるらしい。 ここではその実装と設計 (というほどおおげさなものじゃないけど) について、制作過程の細々とした考えを文章化してみます。 インターフェースを決める どこかで見... 続きを読む

naoyaのはてなダイアリー - XMLHttpRequest でファイルのアップロードができないか?

2005/10/05 61 users XMLHttpRequest プレビュ naoya File

■ XMLHttpRequest でファイルのアップロードができないか? ブックマーク経由でみかけたCodeWeb: 画像をアップロードする前にサムネイルを表示させる。 では、JavaScript を使ってファイルをアップロードする前にプレビューする方法が紹介されてました。input type="file" な input 要素の onchange ハンドラでごにょるというもの。 一方で、プレビュ... 続きを読む

submit ボタン disable 技の罠 - naoyaのはてなダイアリー

2005/08/04 108 users naoya submit onsubmit Disable

昨日のonsubmit で submit ボタンを disable にしてユーザビリティを良くするにはちょっとした罠があって、それに気付かずに使うとはまってしまうかもしれないので、それもちょっと書いておく、というか今日僕自身がはまったわけだが。罠というのは、type="submit" な input 要素、つまりは submit ボタンを onsubmit ハンドラで disable するまでは良... 続きを読む