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... 続きを読む

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 するまでは良... 続きを読む