入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
入力フォームのユーザビリティ&アクセシビリティ
入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
[CSS]検索フォームを素敵なデザインするスタイルシート集
検索フォームを素敵なデザインにスタイリングする、クロスブラウザ対応のスタイルシートをCss Finestから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <form id=”searchform1″ method=”get” action=”" > <input class=”isearch1″ type=”text” name=”keywords” id=”keywords” /> <input class=”ibutton1″ type=”submit” value=”" /> </form> </textarea>
type=”file”のクリア - Mars Diary
question:1193930047 より <script type="text/javascript"> function sample(oId){ var obj = document.getElementById(oId); var stO = obj.innerHTML; obj.innerHTML = stO; } </script> <span id="XYZ"><input type="file" name="file" size="10"></span> <input type="button" value="←" onclick="sample('XYZ')">一見、無意味な書き戻しをしているようだが、 <input type="file"> の場合、valueへのアクセスが禁じられているのでvalue=""と同じ効果が得られる。 DOMで削除した後、生成するというのも
px*blog | ボタンのtypeが画像の場合のresetやsubmit
web (20) 1219330029 できごと (2) 1194060480 ひとりごと (9) 1218507902 Comments Recent Comments IEのバグメモ otogawa 08.19 ikezawa 08.18 カラーピッカー＆文字リサイズ for Serene Bach 柚子 07.12 otogawa 07.08 柚子 07.07 わたし的、よくやるクラスネーミング わさび 07.01 otogawa 06.30 わさび 06.29 初CSS Nite体験 otogawa 06.19 なかにしゆうすけ 06.12 Trackback Recent Trackback Serene Bachで各アーカイブごとにテンプレートの表示項目を制御 HP-TOOLBOX 04.19 ページナビゲーション css Az ::clivia:: 01
ヨモツネット 実験室 » フォームに入力された全角文字を自動で半角に変換する
このスクリプトに機能を追加した valueconvertor.js を公開しています。アーカイブとしてこの記事は残してありますが、この replaceascii.js 機能をご利用する場合は、より安定している valueconvertor.js のご利用をおすすめします。 概要 フォーム入力時に『半角英数で入力してください』の項目があった場合、ユーザの入力ミスを少なくしてあげるために便利なスクリプトです。 ただし、JavaScript が使えない環境では動作しませんので、あくまでもオプションとしてお使いください。 動作確認用の DEMO ダウンロード 使い方 ダウンロードした replaceascii.js を XHTML ファイルの head 要素内などで読み込んでください。 このとき、replaceascii.js と読み込む XHTML ファイルの文字コードが同じになるようにしてくだ
Particletree » Rediscovering the Button Element
IntroductionCreating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing with form elemen
JavaScript製のフォームバリデータライブラリいろいろ:phpspot開発日誌
CSSgallery.info Javascript form validators When we use forms, we need somehow to validate the data user input. JavaScript製のフォームバリデータライブラリがいろいろ紹介されています。 Realtime validation using Ajax ( フォームの入力値をリアルタイムにバリデーション「Realtime validation」 ) LiveValidation ( JavaScriptでリアルタイム値チェックを簡単に行える「LiveValidation」 ) JSValidate ( prototype.jsベースのリアルタイムバリデートJSライブラリ「JSValidate」 ) validator.js - Client-side form validatin
いざ作るとなると面倒なフォーム部品（コピペ用） - Archiva
Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 ペタっと貼り付けときます。 性別 性別 <label for="male"><input type="radio" name="sex" value="male" checked="checked" id="male" />男性</label> <label for="female"><input type="radio" name="sex" value="female" id="female" />女性</label> 年月日 <select name="year"> <option value="xxx"> ----- </option> <option value="1988">1988</option> <option value="1987">1987</opti
AreaEditorとは（AreaEditor） - アイデアマンズ株式会社
AreaEditorとはテキスト編集エリアから右クリックでエディタを起動、AreaEditorでブログやWikiの編集がもっと楽になります AreaEditorは、ブログやSNSの日記、Wikiなどを使うこんな方に最適なツールです。 よく長文を書く方 サーバのトラブルやうっかり戻るボタンを押して、せっかく書いた文章が消えてしまったことがある方 すでに最初はテキストエディタで原稿を書いて、テキスト編集エリアにコピー&ペーストしている方 AreaEditorを使うと、ブラウザのテキスト編集エリアの右クリックメニューからテキストエディタを起動し、そのまま効率よく内容を編集することができます。ファイルとしてバックアップが残るので、突然のトラブルにも安心です。 テキスト編集エリアから外部エディタを起動 Internet Explorer上のテキスト編集エリアで右クリックメニューに編集メニューが追加さ
実践アクセシブルHTML - フォームは送信してもらえばこそ
こんなフォームはイヤだ！ フォームとは、HTMLのFORM要素などによってマークアップされているコントロール群の塊のことです。さまざまなウェブサイトにおいて、主に問い合わせのページであるとか、サイト内検索のためのキーワード入力用にだとかで利用されています。コミュニティ機能を備えているようなサイトであれば、掲示板システムのようなところでも使われていることでしょう。フォームのないウェブサイトのほうが珍しいのではないでしょうか。それくらい、制作側にもユーザーにも身近なものです。 INPUT要素やTEXTAREA要素などといった、フォームのコントロール各要素の機能はブラウザによって提供されているため、どのようなブラウザであってもその操作感に大きな違いが出ません。しかしコントロールごとの操作に違いが出ないといっても、フォーム全体としてはやはり使いやすいフォームと使いにくいフォームというのがあります。
横並びのフォームのマークアップ - Webtech Walker
以下のような、よくある横並びのフォームですが、どのようにマークアップするのがいいのか迷います。 今まではよく定義リスト(dl)を使ってマークアップしていまたのですが、他にもいろいろなマークアップがありそうなので書き出して見ました。 labelをうまく使えば余計なタグを入れなくてすみます。今回はposition:absoluteで横並びを実現してます（tableを除く）が、floatを使う方法もあります。僕はもっぱらposition派。 リスト(ul,ol) シンプルで、構造の意味的にもしっくりきます。順序付きリスト(ol)か順序無しリスト(ul)にするかはケースバイケースです。 DEMO <ul id="formItems_1"> <li><label for="commentAuthor_1">名前</label><input type="text" name="author" valu
ひとり開発ブログ | » ロボット投稿型スパムをさくっと防ぐ超簡単な方法
なんと、このideamiというしょぼいサイトにも海外からのロボット投稿型スパムが来るようになってしまいました。悲しい。 何とか対策をしようと思っていたところ、dotliveのオカダ君がいい方法を教えてくれました。（Thanks!） やり方は簡単。 ロボットスパムは、htmlのソースからformを見つけ、そこにデータを自動的に入れて投稿しているわけです。その投稿の仕方は単純で、どうやらnameでよく使われるような単語を見つけて、それに投稿しているぽい。 たとえば、「name」は名前、「mail」はメール欄、「url」はurl入力欄、みたいな感じです。 今回の対策では、これを逆手に取ります。つまり、偽物のフォームを作り、それに入力があるもの＝ロボットによる投稿、と見なし、投稿させないというものです。 偽物のフォームを作り style=”display: none” しておいて、ユーザーには見
input要素などにおけるIEのバグ
input要素などにおけるIEのバグ ちょっと、はまったのでメモ書き IE6やIE7では、margin-leftとwidthが指定されたブロックレベル要素内の行ボックスの先頭にinput要素やtextarea要素がある場合、適切な位置に配置されないというもの。 select要素などは適切に配置される。 CSS p{ margin-left:50px; width:100px; } HTML <p><input type="text" /></p> <p><textarea></textarea></p> <p><select><option>test</option></select></p> サンプル とりあえずmargin値で余白をとるのではなくpadding値を指定することで対応。 関連エントリー operaでのfloatの挙動 IE7でページが表示されない件について IE7用のCS
CSSで独自デザインされた検索ボックスを作成:phpspot開発日誌
HOWTO: spruce up your search box with CSS and a background image d’bug Very few designers appreciate the aesthetic of a text input field, and styling form fields cross-browser on any Web site can be a tedious and frustrating experience. CSSで独自デザインされた検索ボックスを作成。 次のような検索ボックスを作成するサンプルが公開されています。 画像は１枚だけで、構成は結構シンプルなつくりになっているようです。 デザインにこだわるなら、こういった部分もちゃんとデザインしたいですね。 具体サンプルのページ
都道府県一覧セレクトフォーム HTML用ひながた ahref.org
北海道 青森県 岩手県 宮城県 秋田県 山形県 福島県 茨城県 栃木県 群馬県 埼玉県 千葉県 東京都 神奈川県 新潟県 富山県 石川県 福井県 山梨県 長野県 岐阜県 静岡県 愛知県 三重県 滋賀県 京都府 大阪府 兵庫県 奈良県 和歌山県 鳥取県 島根県 岡山県 広島県 山口県 徳島県 香川県 愛媛県 高知県 福岡県 佐賀県 長崎県 熊本県 大分県 宮崎県 鹿児島県 沖縄県 <select name="pref_id"> <option value="" selected>都道府県 <option value="1">北海道 <option value="2">青森県 <option value="3">岩手県 <option value="4">宮城県 <option value="5">秋田県 <option value="6">山形県 <option value="7">福島県
ウノウラボ Unoh Labs: buttonタグでサブミットするあれこれ
CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出
入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル:phpspot開発日誌
Form field hints with CSS and JavaScript (Ask the CSS Guy) My co-workers pointed out a nice effect on the Vox registration form. 入力フィールドにカーソルを合わせた際に吹出しヒント表示するCSS＆JavaScriptサンプル。 次のように、入力フォームにカーソルを合わせた時点でそのフィールドのヒントを表示できます。 フォームの入力フィールドの下に説明を書くよりも、ポップアップしてヒント表示したほうがユーザビリティ的によさそうですね。 要素の表示/非表示処理をJavaScriptによって行っていて、綺麗なHTMLによる実装が可能な点もいいです。 また、サンプルが1ファイル＋画像1枚とシンプルなので、あまりJavaScriptやCSSの知識のない方でも、ちょこっと変え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
フォームのデザインいろいろ - DesignWalker
検索枠に「○○を入れてください」みたいなものを見ます。…