input buttonを画像にしてロールオーバーもつけてみる :: Lunatic-Code
フォーム関係はあんまりいじりたくないんだけど、 企業関係のページだと、メールフォームなんかで結構使うので、私用じゃ使わないのに需要は多い。 特にsubmitボタンを画像にして、さらにオールオーバーさせてくれとか言われたりするとﾃﾗﾒﾝﾄﾞｸｻｽ。 で、buttonタグだとボタンのごとく(というかボタンだけど)クリックでベコベコ動くのが気に入らない。 ギリギリの幅と高さにするとFirefoxでクリック時に見切れるし('A｀) inputでtype="image"も type="reset"とかやりたいときに困る。 ってことで、inputでtype="image"以外の方法。 とりあえずHTMLコードはこんな感じ。 <input class="input_btn" id="btn_send" name="btn_send" value="送信" title="送信" type="su
input（フォーム送信ボタン）にCSSで背景に画像を置く 直置きダメな時、属性にスタイルを当てる方法 - ライフ向上委員会
今、カスタマイズしているECがあって、自動生成のフォームがいくつかあった。ボタンを画像にしたくても、触れない領域だからどうしようと思って、開発元に問い合わせた。 画像ボタンにしてしまうとInternet Explorerで入力した値を引き渡せない時があって、危険なのでCSSで制御してほしいって言われた。 なので、inputにスタイルを当てようと思ったのだけれど、id属性もclass属性のないので、スタイルを当てれずに、ネットで調べた。 解決方法 自分がやってのはこんな感じ。 input[name=【name属性の値】]{ border: 0px; width: 50px;/* 画像の幅 */ height: 20px;/* 画像の高さ */ background: url(【画像のパスが入ります。】) left center no-repeat; } こうすると、問題が2つ起きる。 1つは
CGI RESCUE チャレンジＣＧＩ - フォームメール(WebFORM)
重要な告知 スパムに対する脆弱性があるため、v4.3までをご利用の方は至急バージョンアップしてください。 特徴 ＷＷＷのフォームに記入された内容を電子メールするスクリプトです。 インターネットメール形式（jis7）で、日本語もデコードされたメールが届きます。 漢字コードはjisに変換して送信されます。ユードラ等のメールソフトでは、 自動判別にすると化けることがあるようです。 記入者のリモートホストやブラウザ情報も表示します。 記入者が誰かを確認することはできません。なぜなら、ＷＷＷにアクセスされるのはすべて nobodyだからです。相手を確認するのは、記入者が自ら書き込むメールアドレスや名前ですから、 必ずしも本人かどうかは分かりません。モラルの問題でもあります。 記入された内容を確認する画面が出ます。これを出さずに直接送信することも可能です。 一般的なParse Formとは異なり、同じ
ソシオメディア | iOS6 Mobile Safari : ローテーションで余白が生じる現象への対処
はじめは問題なく表示されているが… デバイスを一度横向きにして戻すと余白ができる スマートフォンの普及にともない、スマートフォン向けウェブアプリケーションのUIデザインを依頼いただくことが多くなってきました。 先日、ある一般消費者向け検索サービスのスマートフォン対応に際し、UIデザインとプロトタイプ制作のお手伝いをさせていただきました。 ちょうど同時期に iOS6 のリリースがあったのですが、プロトタイプのコーディングをしているなかで、「端末を回転させているうちに余計な余白ができてしまう」という iOS6 特有の不具合に出くわしました。 スマートフォン向けのいくつかのウェブサイト/アプリケーションに同様の現象が見られましたので、不具合解消の一助になればと思い、現象の発生条件と対処法を紹介させていただきます。 iOS6 の Mobile Safari で、画面をランドスケープ表示（横向き）か
会員登録フォームを構築するポイント | ランサーズ社長日記
いいね！ 11 ツイート B! はてブ 734 Pocket 58 ここ2・3日、ひたすら色々なサイトの会員登録フォームやコマースサイトの購入フローを見ていました。 また、フォームのユーザビリティについて語っているブログやサイトをみて研究していました。 こうすれば登録数が劇的に上がる！とか、売上が上がる！といった方法はありませんが、少しだけユーザーに安心感を与えたり、ストレスを取り除いたりする方法はたくさんありますし、見ていたサイトでも登録しやすいサイトには共通点が多くありました。 少し量が多いですが、自分で意識的に行ってきたこと、登録しやすいサイトの共通点、ブログやサイトをみて参考になる点をまとめてみました。 1つ1つはよく言われていることで、大したことありませんが、こういった小さなディティールにこだわって行きたいと思います。ケースバイケースの側面も強いのですが、何かの参考になればと思い
携帯XHTMLでの入力モードのまとめと、ちょっとしたハマりどころについて - 絶品ゆどうふのタレ
先日の勉強会での発表内容に関して、ke-tai.orgさんのところで入力モードについて突っ込まれたので、せっかくだし書きかけの記事をきちんとまとめてみることにしました。 元々、wideの%MobileStudyで入力モードの話が出た際、意外と情報が間違って知られていたりすることが多いようだったので、特にはまりやすいあたりを中心に、入力モード指定についてざっくりと書いておこうと思って、まとめたかけでそのまま放置していたｗものがあったんですが、それがベースです。 そんなわけで、記憶頼りが中心であんまり検証しないで書いてるので、間違いが含まれてたらごめんなさい。 では本題。 入力モードとは まず、入力モード指定って何のことかという話からすると、みんな携帯をいじる時に「全角かな」とか「数字」とか「英小文字」とかいろいろ端末の文字入力を切り替えると思うんですが、あれのことです。 サイトを作る時にin
[(X)HTML] モバイルサイトにおけるinput要素の初期入力モード指定 | Blog | Development Reference
携帯サイトでは、特に何も指定せずにinput 要素を使用すると初期入力モードが全て「全角かな」になるため、メールアドレスや数字のみ入力すればよい項目は、いちいち入力モードを変えなければいけない。 これは携帯電話の特性上、ユーザにとっては非常にストレスになる。 input要素向け独自属性 これを回避してユーザビリティを向上させるため、各キャリアごとに初期入力モードを指定するためのinput要素向け独自属性が用意されている。 Docomo, au（istyle属性） 全角かな
スマートフォンサイトのエントリーフォームにおけるユーザービリティ6のポイント｜サービス｜株式会社デジタルアイデンティティ-Digital Identity Inc.
PC向けに用意していた既存のフォームをそのままに表示すると、画面サイズや操作方法の違いから 「入力欄が小さい」「手で画面拡大しなければならない」「設問が確認出来ない」等、様々な問題が起こります。 起こりがちなフォームのトラブル事例とともにユーザビリティのポイントをご紹介します。
フォームの定義（form）｜HTML要素｜HTML5｜PHP & JavaScript Room
form〔フォームの定義〕 fieldset〔フィールドセット〕 label〔ラベル〕 input〔入力要素〕 button〔汎用ボタン〕 select〔プルダウンメニューの定義〕 datalist 〔選択可能なデータリスト〕 optgroup〔選択肢のグループ化〕 option〔選択肢〕 textarea〔テキストエリア〕 keygen 〔ペア鍵作成ジェネレータ〕 output 〔計算結果〕 form フォームの定義 2009/8/26 form要素は、ユーザーが入力するためのフォームを表します。 ユーザーが入力したデータを指定したURLへ渡すために使用します。 form要素を入れ子にしてはいけません。 属性 HTML4.01にあったname属性は廃止されました。 HTML5からdata/replace属性が新しく追加されました。
Joomla 2.5.6の利用規約機能
Joomla 2.5.6では、会員登録のフォームでサービス利用規約に同意する、しないの確認機能が標準で追加されました。他にも新規機能が追加されましたが、特に一般ユーザーにとって利便性が高い機能としてサービス利用規約(TOS:Terms of Service)機能をご紹介します。 新規に追加されたTOS機能は、プラグイン管理画面にありますユーザープロファイルの中で設定します。 サービス利用規約のページ作成は、通常のページ作成で構いません。上記の項目（記事利用規約の選択）でページを選択します。 実際のユーザーがサービス利用規約のリンクをクリックするとポップアップウインドウが下記のように表示されます。 新しい記事の掲載時にメールで同じ内容を配信します。 お問合せフォーム
メールフォームを作る（コンタクトコンポーネント） - Joomla!の道しるべ
メール不達のお知らせ 2018年11月1日まで、本サイトのお問い合わせメールが機能しておらず、メールを受け取ることができませんでした。この期間内にお問い合わせ頂いた方は、大変お手数ではございますが、再度お問い合わせページからご連絡ください。 コンタクトコンポーネントは、メールフォームを設置でき、その他に住所や電話番号などの連絡先を掲載できるコンポーネントです。複数のメールフォームを作成する事が可能なので、例えば部署毎にメールフォームを持つこともできます。またユーザ毎にメールフォームを持つこともできます。 ではメールフォームコンポーネントの設定方法について見ていきましょう。 まず始めにメールフォームを登録するカテゴリを作成します。カテゴリを作成するには「コンポーネント」→「コンタクト」→「カテゴリ」を選択します。 カテゴリの管理画面が表示されたら、画面右上の「新規」をクリックします。タイトル
jQuery Mobileによる問い合わせフォームの作成 (1/5)
jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に続き、簡単な会社案内サイトを作成ながらjQuery Mobileの基本を学びましょう。今回は、jQuery MobileのフォームUIを使って、以下のような「お問い合わせ」ページ（#contact）を作成し、会社案内サイトを完成させます。 フォームUIの課題とjQuery Mobileによる解決 スマートフォンのブラウザーに標準で用意されているフォーム部品はどれもサイズが小さく、そのままでは指による操作に適しません。スマートフォンサイトの制作ではフォームをスマートフォンに最適化することが重要です。 以下は、jQuery Mobileを使わずに作成したお問い合わせページをiPhone/Androidで表示したものです。
CSS3 Gradient Buttons - Web Designer Wall
Last week I talked about Cross-Browser CSS Gradient. Today I’m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part
第2回 アクションを起こしてもらえるフォームのポイントは？ | gihyo.jp
使いやすいフォームをデザインする6つのポイント みなさんは、どのようにフォームをデザインしているでしょうか？ CSSでスタイリングされていない素のHTMLフォームは、当然ですがデザイン性にとぼしいものです。また、入力エリアが狭いため、ユーザビリティも高いとは言えません。 フォームにはお問い合わせフォーム、申し込みフォーム、予約フォームなどいろいろありますが、共通するのは「ユーザーにアクションを起こしてもらう重要な要素である」ということです。しかし、フォームへの入力は、ユーザーにとって面倒な作業です。そのため、極力簡単に入力できるようにして、ユーザーの負荷を軽減する必要があります。 それでは、どうすればユーザーの負荷を軽減させることができるでしょうか？ そのためのポイントが以下の6つです。 要素を整列させる 適度な余白をつくる ディテールを作り込む デザインされたボタンを使う 住所を自動入力
＠IT：クロスサイトスクリプティング対策の基本
最近Webアプリケーションに存在するセキュリティホールが注目を浴びている。その中でも「クロスサイトスクリプティング」と呼ばれる脆弱性が有名であるが、クロスサイトスクリプティング脆弱性について正確に理解している人が依然として少ないと感じる。 本稿では、クロスサイトスクリプティングとはどのような脆弱性であるのか、この脆弱性を持ったサイトが攻撃されるとどのような被害が起き得るのか、なぜそのようなセキュリティホールが作り込まれてしまうのか、どのように対策をすればよいのかを解説していく。 ※以下本文中では、クロスサイトスクリプティング脆弱性のことを「XSS」と表記する。「Cross Site Scripting」の略であるから「CSS」と表記している記事もあるが、「Cascading Style Sheets」の略も「CSS」となり紛らわしいため、「XSS」と表記する場合が多くなってきている。本稿で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
～ ThemeResMail v.2.162 お読みください～
フリーCGI関連のサービスを終了しました｜ホームページ制作 WEBシステム開発｜株式会社ディーアイシー
ユーザー視点のウェブデザインガイド コーナーの記事一覧 | Web担当者Forum
Contact Form 7 | WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。 [日本語]![Contact Form 7 | WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。 [日本語]](https://cdn-ak-scissors.b.st-hatena.com/image/square/446e1bccef6284edf6dbeb0a2daf13487fcbe5de/height=288;version=1;width=512/https%3A%2F%2Fcontactform7.com%2Fwp-content%2Fplugins%2Fcf7com-utils%2Fimages%2Ficon-128x128.png)
Perl/CGI