label で input[type="file"] を装飾するな
input[type="file"] な要素を装飾する方法を検索したときに、次のような間違った label 要素の使い方を紹介する記事ばかりヒットするのが気になったので書きました。label 要素を使っても問題ない場合もありますが、間違った使い方をしている（しようとしている）人に届きやすいようにこのような表題にしています。 何が問題か 上記の方法は input 要素を display: none で非表示にし、label 要素を使ってヒット領域を拡大させて「ファイルを選択」ボタンを表現するという方法ですが、この方法ではフォーカスが当たりません。また、tabindex 属性に非負の値を設定しフォーカスを当てられるようにしても label は clickable な要素ではないので Space / Enter キーで click イベントを発火することができません。 どうするべきか butto
![label で input[type="file"] を装飾するな](https://cdn-ak-scissors.b.st-hatena.com/image/square/abcddc7bb77ffd423240f83b7922f8b6d66776fc/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--fjF5h3Vm--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3Alabel%252520%2525E3%252581%2525A7%252520input%25255Btype%25253D%252522file%252522%25255D%252520%2525E3%252582%252592%2525E8%2525A3%252585%2525E9%2525A3%2525BE%2525E3%252581%252599%2525E3%252582%25258B%2525E3%252581%2525AA%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Adqn%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzYxMjZlNDcxNWEuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
【HTML】フォーム作成の基本！formとinputの使い方
「formタグやinputタグがいまいちわからない・・」 「フォームの作成で、最低限知っておかないといけないことは何なの?」 これは、HTMLで始めてフォームをデザインする人が必ず直面する問題です。 これまでWebデザインを中心に学習してきた人が、始めて機能的な要素を追加するときに「フォーム」がでてきます。 このフォームが機能するためには、幾つか理解しておかなければならないポイントがありますが、最初はすぐには理解しづらいものです。しかし、安心してください。フォームでよく使う機能はある程度決まっており、一度覚えれば便利な機能ばかりです。 ここでは、始めてフォームを学習する人向けにフォームの基本を説明します。経験者はすでに知っている知識ばかりです。 フォームを使う場面 ユーザーとのコミュニケーション手段としてWebサイトがある以上、フォームのないサイトはほとんどありません。つまり、Web制作者
Easy File Uploading With JavaScript | FilePond
Upload anything, from anywhere A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
HTML5で追加された input[type=number] を使う上での注意 - Qiita
input[type=number] とは HTML5 の input[type=number] は数値だけを受け付ける入力部品です（デフォルトでは小数の入力も想定されています）。 これを使えば、スマートフォンなら自動でキーパッドが数値用になるらしいです。なるほど、普通の input[type=text] だと文字入力用のキーボードが出る可能性があるので、数値だけしか入力しない場合は input[type=number] のほうが便利そうです。 また、PCでは（ブラウザの実装等にもよると思いますが）「増やす」「減らす」ボタンが出てきたりします。以下がサンプルです。 （一応言っておきますが、↑のサンプルは画像なので、操作できません。） 注意点 せっかく数値入力専用の部品があるのだから、数値入力でこれを使わない手はないですねぇ。もし input[type=number] に未対応のブラウザで表
![HTML5で追加された input[type=number] を使う上での注意 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb8b7e3063b3b513859fec12cb1ff78663431fc2/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9SFRNTDUlRTMlODElQTclRTglQkYlQkQlRTUlOEElQTAlRTMlODElOTUlRTMlODIlOEMlRTMlODElOUYlMjBpbnB1dCU1QnR5cGUlM0RudW1iZXIlNUQlMjAlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElODYlRTQlQjglOEElRTMlODElQTclRTMlODElQUUlRTYlQjMlQTglRTYlODQlOEYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWRhZGRlYWJkZjVlZDE0NDUzNzdmODMxZGU2YTQwODc5%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBteXpreXkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWRjYTZhOWY1NTJkYzJkYWRmYjNkZGE4ZmQzMDg2MWFh%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D79553ecec20e8175575657a8727ec381)
最速・最高のファイルアップロードに近づくための1歩 - Qiita
Webアプリを作っていてよく出くわすのがファイルアップロードですね。単純にアップロードするだけなら実装自体はたいしたことないものですが、より良くしようと思うと想像以上に奥が深く…悩ましい沼感があります🤔 今回は今までファイルアップロードを実装していく中で手に入れた改善ポイントを紹介していきます。これで最速・最高のファイルアップロードに1歩でも近づけられればと思います。 なお、僕が普段開発をしているアーキテクチャの都合上、 nginx Rails の話が出てきますが一部を除きWebアプリなら普遍的に使える話だと思います。 2つの側面から紹介します。 UI編 と パフォーマンス編 です。 UI編は、HTML5を中心に使い勝手を向上させるためのポイントを紹介します。パフォーマンス編ではRailsのファイルアップロードを約10倍高速化⚡️した事例を紹介します。それでは長いですが、よろしくお願いし
[jQuery]フォーム操作、input・selectの値（value）取得のあれこれ - Qiita
jQueryを使ってinputやselectの値を取得する方法をまとめました。 備忘録のため、箇条書きの簡単なまとめとなり分かりにくい点があるかもしれませんが、ご了承ください。 input（テキスト）の操作 ターゲットとなるinput（テキスト） <input type="text" name="hoge" value="あいうえお" data-target="fuga" id="input-1" class="target">
![[jQuery]フォーム操作、input・selectの値（value）取得のあれこれ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e1b2937214edcd677f999b4a2662b09688d2e66b/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCalF1ZXJ5JTVEJUUzJTgzJTk1JUUzJTgyJUE5JUUzJTgzJUJDJUUzJTgzJUEwJUU2JTkzJThEJUU0JUJEJTlDJUUzJTgwJTgxaW5wdXQlRTMlODMlQkJzZWxlY3QlRTMlODElQUUlRTUlODAlQTQlRUYlQkMlODh2YWx1ZSVFRiVCQyU4OSVFNSU4RiU5NiVFNSVCRSU5NyVFMyU4MSVBRSVFMyU4MSU4MiVFMyU4MiU4QyVFMyU4MSU5MyVFMyU4MiU4QyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NTE3NWQ2NjE5YTVjNmY0ODVmODQ2NDZiNzhhYzQzZTg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBub3F1YSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YWJmYjZlY2RlZGY0ODA3YWQwOGIyZGYwODhhOGZiNDE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dbefa6cf541038cc238eada803311b8f3)
rangeslider.js
Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type="range"> slider element. Download v2.3.0 This project is on GitHub. FeaturesTouchscreen friendlyRecalculates onresize so suitable for use within responsive designsSmall and fastSupports all major browsers including IE8+APIThe rangeslider.js API is compatible with the standard HTML input methods. $('input[type="range"]').va
inputイベントでフォーム入力値をリアルタイム取得できるよ。（あとjQuery例。） | Ginpen.com
input イベントを使います。 時間差なしで入力値が取れる。わあかんたん。 jQueryを使った例。 change イベントは入力を終えてフォーカスを外した際に発火するのに対して、 input イベントは入力の度に発火します。 対象要素 <input> <textarea> <select> … IE、Edgeでだめ contenteditable 属性付きの要素 … IEでだめ <select> は change イベントを使います。この場合は変更したらフォーカス残したままでも、すぐ発火する。（よね？ しない環境ある？） <select> のデモ contenteditable は、逆に change イベントが発火しない。 contenteditable のデモ チェックボックスとかはだめ MDNによると、歴史的経緯により <input type="checkbox"> とかは cl
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
キーボード操作もできるアクセシブルなチェックボックスとラジオボタンをCSSでカスタマイズする ｜ Tips Note by TAM
チェックボックスやラジオボタンは、「閲覧環境によってデザインが変わってしまう」「サイトのデザインと合わない」といった理由からCSSでカスタマイズすることが多いと思います。 ただ、検索でよく見るカスタマイズ方法だと、inputタグをdisplay: none;で非表示にするので、フォーカスが当たらずキーボードでの操作ができなくなってしまうものが多いです（スクリーンリーダーの読み上げがされないこともあるそうです）。 キーボード操作の機能を残したまま、CSSでカスタマイズする方法を紹介します。 2017年9月8日補足 アクセシビリティの情報を発信されている「AccSell（アクセル）」のポッドキャストに取り上げていただきました。 第123回: 「音声ファーストインデックス」｜ポッドキャスト｜AccSell そこで以下のような点を指摘していただきました。 background-imageプロパティ
HTMLとCSSだけ！要素の表示・非表示を切り替える方法
今回はHTMLとCSSだけで要素の「表示」⇔「非表示」を切り替える方法を解説します。JavaScriptやjQueryは使わないので、AMP対応している場合にも利用できます。 この画像のようなイメージですね。隠しておくものは文章でも、画像でも、箇条書きでも何でもOKです。 表示⇔非表示を切り替える仕組み ひとまず、仕組みを解説しておきます。コードは後ほど載せるので、仕組みに興味のない方は読み飛ばして頂ければと思います。 inputタグに連動させて切り替え
ラジオボタンをUIに用いる時のポイントを解説！より良いサイト、アプリの利用環境のために
ラジオボタンはフォームにおける必須要素です。互いに相容れない２つ以上のオプションがある時に使用され、ユーザーは正確に１つの選択肢を選ばなければなりません。言い換えれば、選ばれていないラジオボタンをクリックすることによって、選んでいた他のどんなボタンも選ばないということになります。 ラジオボタンは正しく使用されれば素晴らしいものです。ユーザーが間違ったデータを入力するのを防ぎます。キーボード・ナビゲーションやプラットフォームを通じた信頼できるレンダリングなど、多くの選択肢を提示してくれます。 本稿では、ユーザビリティ・テストによって巧みにつくられたラジオボタンに関する実用的なガイドラインをご紹介します。 ラジオボタンの名前の由来 古いカーラジオにおいて放送局を変えるために使われたことにちなんでラジオボタンと呼ばれるようになりましたが、このボタンは１つ押された時、別の１つは飛び出すようになって
Dropify — Override your input files with style.
Before Basic HTML input file Now Your so fresh input file — Default version You can add a default value You can set the height You can combine options You can disabled the input Also with a default file You can add a max file size You can disable remove button You can use events You can destroy it Init/Destroy Multiple options are available Only portrait or square images, 2M max and 2000px max-hei
iPhoneで小さい「っ」を簡単に入力する方法
iPhoneで小さい「っ」を簡単に入力する方法を紹介します。厳密には、「っ」は「促音（そくおん）」と言います。 本エントリーはビギナー向けの内容です。 １．問題点 iPhoneの日本語かな入力で小さい「っ」を入力するには、「た」のキーを6回タップするか、フリック入力で「つ」を選択したあと、「小」のキーをタップする必要があります。 フリック入力の場合、「つ」を選択 「小」のキーをタップ 「っ」が表示される が、いずれの方法もやや面倒な感じがします。 ２．「っ」を簡単に入力する 「っ」を簡単に入力するには、「た」のキーをタップしたあと、その左にある左向き矢印のキーをタップするだけです。 「た」のキーをタップして左向き矢印のキーをタップ これで「っ」が表示される タップするキーが隣に並んでいるので、この方法であれば１項の方法より素早く入力することができるかもしれません。 なお、「iPhoneで同
typeahead.js
typeahead.js a flexible JavaScript library that provides a strong foundation for building robust typeaheads
iOS 5(iPhone等)の数字入力用inputフィールドでカンマを表示させない方法 - flairDays - てさぐりの日々
type=numberの入力フィールドにカンマが入る 10月にApple iOS 5がリリースされ、早速お手持ちのiPhone/iPadなどをマイグレーションした方も多いでしょう。私もその一人なのですが、Safariを使っていてある困った「変更」にすぐ気付きました。 ブラウザ内で数字を入力させるためのフィールドで、3桁毎に勝手にカンマが入る この件については、id:oogattaさんの記事に記載があります。 iOS5 で type="number" の input 要素に数字を入力した時の処理が仕様により即したものになったようで、単純に言うと、本当に「数字・実数」にのみ使うものになった。例えば！郵便番号には！使えない！ 俺！仕事で！郵便番号に！使ってた！！ 047 とか入力するとなんと 47 にされるし、 1408 とか入力すると 1,408 とコンマが入ったりする。 http://d.h
フォームの<input type="file" />の値をjQueryでリセット（クリア）する方法
フォームの<input type="file" />の値をjQueryでリセット（クリア）する方法を紹介します。 １．問題点 フォームの値をリセット（クリア）する場合、通常はtype属性が「reset」のボタンですべてクリアできます。<input type="file" />の値も同様にリセットされます。 HTML <form id="bar" action="foo.cgi"> <input type="file" /> <input type="reset" value="リセット" /> </form> サンプル1 JavaScript（jQuery）でリセットしたい場合、次のように記述すればいいように思われます。 HTML <form id="bar" action="foo.cgi"> <input type="file" id="file" /> <input type="bu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォーム関連要素（2） HTML5でinput要素に追加された新しいタイプ13連発