HTTPを手で書いて学ぶ ファイルアップロードの仕組み
フォームのボタン配置はどこが最適か、左揃え・横並び・上下など、フォームのタイプごとに詳しく解説
フォームのボタン配置は、多くの場合無視されるか、見映えに基づいて優先順位がつけられます。しかし、ボタン配置は非常に重要で、フォームを使いづらくする要因の一つであるため、正しく配置することが不可欠です。 フォームのボタン配置は、対象のボタンとフォームのタイプに依存されます。 さまざまなタイプのフォームを総合的に調査・分析し、それぞれのタイプでどこにボタンを配置するかについて解説します。 Where to put buttons on forms by Adam Silver 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 プライマリボタンは入力欄の左端に揃える 「戻る」ボタンはフォームの上に配置 分岐するアクションはフォームの上に配置 機能に応じて追加のボタンを配置 一部の単一フィールドのフォームでは、入力欄の横にボタンを配置 マ
ブラウザからIME状態を制御する方法 - Qiita
概要 WebアプリのUIとしてフォームを作成する場合は、HTMLの<input>タグを利用する。 この入力フォームに対して入力を始める前に入力できる文字種に応じた入力モードになるようにIMEを制御したいという要件が（特に業務アプリでは）ありうる。 ここではその方法を解説する。 これでIMEがオンの状態になる。ime-modeは以下の値を取りうる。 * active: IMEをオンにする。ただし、ユーザはオフにする操作ができる。 * inactive: IMEをオフにする。ただし、ユーザはオンにする操作ができる。 * disabled: IMEを無効にする。ユーザが状態を変えることはできない。ただし、これは使用してはならない。理由は後述する議論-UXについてを参照。 議論 対応ブラウザについて このime-modeというスタイルはCSS3の標準ではない。 そのため、必ずしも全てのブラウザが対
<button> vs. <input type="button" />. Which to use?
When looking at most sites (including SO), most of them use: <input type="button" /> instead of: <button></button> What are the main differences between the two, if any? Are there valid reasons to use one instead of the other? Are there valid reasons to use combine them? Does using <button> come with compatibility issues, seeing it is not very widely used?
GitHub - jkk/formative: Web forms for Clojure and ClojureScript - rendering, parsing, and validating
CSSでデザインされた検索フォームを作成する│.dotown lab
下記の画像のような検索フォームを直ぐに実装できるよう、HTMLとCSSのコードをメモしておきます。 レスポンシブデザインやリキッドデザインのサイトを想定して、横幅が可変するように設計しています。 一応、IETesterでIE7・IE8は確認しましたが、基本的にクロスブラウザを意識していないのでご注意ください。 HTML <form action="/" name="search" method="get"> <dl class="search"> <dt><input type="text" name="search" value="" placeholder="Search" /></dt> <dd><button><span></span></button></dd> </dl> </form> CSS dl.search{ position:relative; background-
JavaScriptで<input type="file">で選択されたファイルサイズを取得する〜IE編〜 - わたしの日記だよ
先日作った、画像ファイルが選択されたら、ファイルアップロードを行う処理↓↓ struts+jQuery Form Pluginを使ったファイルアップロード① - わたしの日記だよ ですが、JavaScriptでファイルサイズをチェックする処理を入れていたものの IE8だとチェックが効かないよ！と言われてしまいました。 １．現在の実装 今のjsファイルはこんな感じ。（赤字の部分です） fileupload = function(event) { var $form, target; target = event.target ? event.target : event.srcElement; $form = $(target).closest('form'); return $form.ajaxSubmit({ 'target': "body", 'cache': false, 'befo
Javascript：セレクトボックス選択時にページ遷移する | raining
セレクトボックスの値を変更した時に、選択した項目によって別のページに遷移（リンク）させたい場合があります。 Javascriptを使用すれば簡単にページ遷移させることが可能です。 JavaScriptのonChangeイベントを使用し、セレクトボックスの値を変更したら指定のリンク先に遷移するという処理を記述すればOKです。 JavaScriptでページ遷移する方法は「location.href」を使用します。 以前に「location.href」の説明を記述しました。下記に記載しています。 Javascript：locationオブジェクトでURL情報を取得する セレクトボックス optionタグのvalueの値を「location.href」にセットするようにします。 下記に例を記述します。 ■ セレクトボックス選択時にページ遷移 onChangeはフォームの入力・選択値が変更された時に
HTML［datalist要素］入力候補のリストを表す - TAG index
datalist要素は、入力欄（input要素）に対する入力候補のリストを表します。入力候補の選択肢は、この要素内に配置するoption要素で示すことになります。 <datalist id="example"> <option value="選択肢1"></option> <option value="選択肢2"></option> <option value="選択肢3"></option> </datalist> 入力候補の設定方法 入力候補のリストは、他の入力欄に組み込む形で使用することになります。 具体的な設定方法は次のようになります。 datalist要素で入力候補のリストを作成します。 そのdatalist要素にID名を指定します。 対象となる入力欄（input要素）にlist属性を指定して、その値にdatalist要素に指定したID名を記述します。 このID名によって、入力候
https://support.microsoft.com/ja-jp/help/418126
すべての Microsoft 製品 Microsoft 365 Office Windows Surface Xbox セール サポート ソフトウェア Windows アプリ OneDrive Outlook Skype OneNote Microsoft Teams PC とデバイス Xbox を購入する アクセサリ VR & 複合現実 エンタメ Xbox Game Pass Ultimate Xbox Live Gold Xbox とゲーム PC ゲーム Windows ゲーム 映画とテレビ番組 法人向け Microsoft Azure Microsoft Dynamics 365 Microsoft 365 Microsoft Industry データ プラットフォーム Power Platform 法人向けを購入する Developer & IT .NET Visual Studi
Enterキーを無効にする方法 - Qiita
Enterキーを押すと、フォームが送信されることがある。 キーボード入力後、マウス操作してクリックする、という手間が省けてとても便利だと思う。 しかし、入力中にうっかり押してしまったりなど、期待しない挙動をしてしまうこともあるだろう。 この挙動は、HTMLの仕様がそうなっているからである。 ※ 古いブラウザでは以下の内容で対処できない場合があります。 ※ ブラウザの仕様が変わり、以下の内容では対応できなくなる場合があります。 対処方法① 送信ボタンを書き換える(テキストフィールドなどが2つ以上のとき) テキストフィールドなどがアクティブな状態で、Enterキーを押すとフォームが送信される。 <form name="testform1" action="test1.html"> <input type="text" name="text1" /> <input type="text" nam
フォームの入力を限定するjavascript「MaskedInput」
フォームでは、電話番号や郵便番号、プロダクトIDなどの定型的な入力方式を固定することがユーザビリティの向上に役立つかも知れません。 digitalBushのMaskedInputでは、リアルタイムにフォームの入力方式をチェックすることができます。 sponsors 使用方法 MaskedInputのjquery.maskedinput-1.0.jsに加え、jQueryが必要になります。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.maskedinput-1.0.js" type="text/javascript"></script> 上記のようにhead内にスクリプトを埋め込み、入力方式を固定したいinputの
Chromeのautocomplete選択時にJavaScriptのイベントを発火させる方法 - Qiita
はじめに Chromeでinputタグにfocusをした状態で上矢印か下矢印をクリックすると、ブラウザに保存されたテキストが出てきます。 こちらをmousedownで選択した際、mousedownもchangeもfocusもblurも発生しませんでした。 「autocomplete="false"にして解決☆」 みたいなことが各所に書かれていたんですが、ユーザーにやさしくないのでいろいろ検索していました。 setIntervalを回してちょっと前のvalueと比較というのもメンドクサイユーザーにやさしくないので避けたいです。 結果的に、jQueryであっさり解決したのでメモしておきます。 解決方法
jQueryでテキストボックスの変更を監視/検知する - Qiita
はじめに テキストボックスの変更を検知したくてイベントの挙動を調べたりしたのでメモ。 change, keypress, keyupの挙動まとめ キー操作したときにどんなイベントが発生するのかは日本語入力時に発生するキーイベントのテストを使って確認させていただきました。 ポイント changeはフォーカスが外れたときに発生する keypressは全角やdelete,backspaceを入力しても発生しない keyupはカーソル移動や全角・半角の切り替えなどすべてのキー操作を拾ってしまう change changeイベントを使うと変更を検知できます。
自動計算 onkeyup - Google 検索
jQuery keyupメソッドでテキストボックスに入力した値から自動計算する ... 浮動小数点値を返します。 ... 与えられた数値を固定小数点表記を用いて表した文字 ...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
よく見るスイッチ型のcheckboxを作る |
problems with form_tag for controller action with members-get route
<input type="number">のスピンボタン（右のボタン）を消す方法 - Qiita
jQuery toggle div from select option
1-5. hiddenは危険（セッション変数を利用しよう）