label のススメ | d-spica
label のススメ 2008-07-29 0 0 XHTML/CSS CSS, label, XHTML label要素とその挙動 | Web標準Blog | ミツエーリンクス これを読んでいて，ぼくがやっていることをちょっと紹介しようと思いました。 label の働き お名前 <input type="text" name="name" id="name" size="20" /> このような場合，コントロール本体であるテキストボックス<input type="text" ... />とその説明である「お名前」というテキストは，隣同士に並んではいるけれど，対応していることがはっきりマークアップされているわけではありません。 label要素を使って，次のようにマークアップすることで，「お名前」というテキストとテキストボックスをはっきり関連づけることができます。label要素内のテキストが
フォームとアクセシビリティ -- ごく簡単なHTMLの説明
フォームはテーブルと同様、視覚的な表現を伴わないと理解しにくいところがあります。HTML4.0では、フォームの各要素とラベル（説明的な名前）を結びつける手段や、要素をグループ化する手段が提供されました。これらを使うとフォームの内容を論理的に構造化でき、スタイルシートとの組合せで自在なデザインも可能になってきます。まだ未対応のブラウザが多い要素ですが、アクセシビリティに配慮したページづくりのためにも、このような機能があることをぜひ理解しておいてください。 目次： コントロールにラベルを付ける コントロールをグループ化する メニュー項目のグループ化 キーボードによる項目移動 取り上げる要素： label fieldset legend optgroup コントロールにラベルを付ける フォームの入力コントロール（テキストフィールドやメニューなど）は、name属性を持ちますが、それは送信データに名
Tableless Contact Form sample02
テーブルを使わないお問い合わせフォームのサンプル。 シンプルなブルー系。タブっぽいラベル。 Checked(win):IE6,IE7,FireFox2,Opera9,Safari Mac未確認。 <fieldset> <legend>Contact details</legend> <form action="" method="post" class="form" id="contactform"> <ul> <li><label for="company">会社名</label> <div><input name="company" type="text" id="company" size="50" /></div></li> <li><label for="name">お名前（ご担当者名）</label> <div><input name="name" type="text" id
AjaxMail：Ajaxを活用したフリーPHPメールフォーム
ウェブサイトを動的なページに変更したい、機能を拡張したいと思ったら、 Ajaxのツールを使って簡単に機能を拡張してみよう。 ウェブサイトを運営するとき、サイトを見たユーザーからコメントを残してもらうことがあります。 また、企業なら連絡方法としてメールの送信ができるように、メールフォームを用意していると思います。 こうしたウェブサイトのメールフォームをAjaxを使って導入することができます。
まぐまぐ！かんたんフォーム - まぐまぐ！
フォームの項目とフォームタイトルを設定！ フォームに投稿された内容を受け取るメールアドレスを設定！ 登録したメールアドレス宛に届いたURLをクリック！ まず規約をお読み下さい。内容をご確認いただいた後、「規約に同意する」ボタンを押してください。 まぐまぐ！かんたんフォーム利用規約 1. 本規約は、まぐまぐ！かんたんフォーム（以下「本サービス」という）に自らのメールアドレスを登録し、本サービスを利用する者（以下「利用者」という）に適用されるものとします。 2. 利用者は、次の行為をしてはならないものとします。 (1) 他人の名誉または信用を毀損すること、他人を誹謗中傷すること (2) 他人の知的財産権を侵害すること (3) 違法行為または違法行為を助長すること (4) 公序良俗に反すること (5) 利用者による電子メールの送信に同意していないメールアドレスに対して電子メールを送信すること 3
さらばプルダウン！ 地図で入力できるWebフォーム
ネットショップや会員制サイトを利用する際にいつも面倒だなと感じていることがある。会員登録や配送先を指定するフォーム画面にある、都道府県名の入力欄だ。 よくあるのが、プルダウンで都道府県名を選ぶ形式だが、これはなかなかのストレスだ。5～6項目ならともかく、47もの選択項目、それも似たような漢字3文字の中から、注意深く狙いを定めなければならない。運悪く1日に何度もこの作業が発生するとうんざりする。 そうした、「HTMLフォームでの都道府県名の選択」に特化した新発想のJavaScriptライブラリが登場している。CogniTom Academic Design作の「jsmap」がそれだ。jsmapをHTMLフォームに組み込むと、プルダウンで選択する代わりに、地図をマウスでクリックすることで都道府県名を入力できるようになる。 地図とはいっても、ご覧のようにいい意味でざっくりとしたデザインで、非常に
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
ヨモツネット 実験室 » フォームに入力された全角文字を自動で半角に変換する
このスクリプトに機能を追加した valueconvertor.js を公開しています。アーカイブとしてこの記事は残してありますが、この replaceascii.js 機能をご利用する場合は、より安定している valueconvertor.js のご利用をおすすめします。 概要 フォーム入力時に『半角英数で入力してください』の項目があった場合、ユーザの入力ミスを少なくしてあげるために便利なスクリプトです。 ただし、JavaScript が使えない環境では動作しませんので、あくまでもオプションとしてお使いください。 動作確認用の DEMO ダウンロード 使い方 ダウンロードした replaceascii.js を XHTML ファイルの head 要素内などで読み込んでください。 このとき、replaceascii.js と読み込む XHTML ファイルの文字コードが同じになるようにしてくだ
申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【前編】 | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 前回のコラムでは、ウェブサイトを使っているお客様がなぜ途中であきらめるのかというテーマで話しました。「ウェブサイトの欠陥」を大きくくくると、次の4つのどれかに当てはまります。 サイトのコンテンツ自体が足りない（価値の欠陥）価値のあるコンテンツが探しにくい（ナビゲーションが悪い）価値のあるコンテンツは見つかったがよくわからなかった（プレゼンテーションが悪い）サイトに信頼がなかったために使うのをやめ
複数カテゴリ検索のインターフェース (ユーザビリティ実践メモ)
Webサイトの検索機能で、「テキスト」と「画像」、「ニュース」と「製品情報」など、複数のカテゴリを切り替えて検索できる機能を提供しているものがあります。今回はその切替の方法について考えます。 ある金融情報サイトで、企業名でサイト内検索を行ったところ、「記事」カテゴリでの検索結果が0件と表示されました。 このとき、結果が0件だったことを認識したユーザは、ページ上部のタブをクリックして「株価」に切り替えました。このとき 自分がクリックしたタブが切り替わる（アクティブなタブが濃い色になる） という変化で、ユーザには自分が別のカテゴリに移動したことが伝わりました。 しかし、検索結果部分の見た目に変化がなかったため、ユーザは「どちらのカテゴリにも自分の求める情報がない」と判断して、このサイトを立ち去りました。 このページではタブ切り替えだけでは再検索されず、新しい画面で改めて「検索」ボタンをクリック
Wufoo ? HTML Form Template & CSS Design Gallery
An arrow pointing left An arrow pointing right An arrow pointing left A magnifying glass The Twitter logo The Facebook logo The LinkedIn logo The Google Plus logo The RSS feed symbol The Wufoo by SurveyMonkey Logo The Wufoo by SurveyMonkey Logo A credit card A tray with an upwards pointing arrow A diamond with two arrows leading to different boxes Two bars in a chart Two pages A painter's palette
Tableless forms
I consider this a very important step in learning web design the right and straightforward way. CSS is no longer just a way of adding some simple styles to an element in your page. More and more web designers work very much with styles in order to create a unique and easy to maintain website. You can see some inspirational examples by visiting a gallery like CSSREMIX or cssdrive. Those are CSS gal
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォームを角丸にする方法
[CSS]使いやすいスタイリッシュなフォームを実装する17のチュートリアル | コリス
pForm - Free HTML Form Builder - Create Web Form Template Online
Styled Text Area by CSS-Tricks
Niceforms