<input>－HTML5タグリファレンス
<input>タグは、フォーム（<form>～</form>）を構成する様々な入力部品を作成する際に使用します。 ■フォーム部品の種類を指定するtype属性 type属性は、フォーム部品の種類を指定する際に使用します。 <input>要素は、type属性にどのような値を指定するかによって、 一行テキストボックス・チェックボックス・ラジオボタン・送信ボタン・リセットボタン等、 フォーム部品の種類を指定し分けることができます。 type属性の初期値は、type="text"（一行テキストボックス）です。 ■type属性の値 type="hidden" 画面上は表示されない隠しデータを指定する type="text" 一行テキストボックスを作成する（初期値） type="search" 検索テキストの入力欄を作成する type="tel" 電話番号の入力欄を作成する type="url" URL
すてきな入力フォームを作るために調べてみたこと - console.blog(self);
入力フォームって、基本的に忌み嫌われるもの。項目がたくさんあると、そっとタブを閉じたくなる。 旅行に行くときに、いろいろな旅行会社の入力フォームを見たけど、あまり使いやすくなかった。というか、見た瞬間に入力する気が失せてしまうような入力フォームが多かった。 入力フォームの多いページに関わることがあるので、入力フォームに関する資料をいろいろ読んだ。タブを閉じられないように、使いやすい入力フォームを考えたい。 入力フォームについて読んだもの 参考になったのはこれらの資料。どの資料も新しいものではないけど、参考になることはたくさんあった。 僕は英語が苦手で、そんな僕が読んだ感想を書くので間違いがあるかも。間違っていたら教えてください。詳細は原文を読んでください。 RIAC：RIAコンソーシアムユーザビリティガイドライン LukeW | Web Form Design Best Practices
第12回 ファイルのアップロード | gihyo.jp
Webブラウザから画像などのファイルをアップロードできることは読者もご存知でしょう。ブログのように、文章と画像の両方を同時に投稿するのがあたり前になっているWebサイトも数多く存在します。では、アップロードされたデータをWebアプリケーションではどのように受け取っているのでしょうか。今回はそれについて紹介します。 なお、PHPプログラムでアップロードされたデータを処理するためには、実行環境においてアップロードを受け付けられるように設定されていなくてはなりません。オンラインマニュアルなどで事前にその設定を確認しておいてください。 アップロードのためのフォーム まず、ファイルをアップロードするためのフォームについて確認しておきましょう。リスト1に画像とそのタイトルを投稿するフォームの例を示します。それをWebブラウザに表示させたものが図1です。このフォームにはポイントが3つ隠れています。 リス
「人生を変える小さな習慣」のすすめ
「習慣によって人はなんと変わることか！」 （シェイクスピア “ヴェローナの二紳士” 第五幕四場） ライフハックとはなんですか？ と聞かれると、私は「人生を変える小さな習慣です」と答えています。 もともとのライフハックの意味は仕事を楽にするちょっとした工夫であったり、裏ワザだったりするのですが、そうした小手先のことがやがて習慣として人生に固定され、いつかはその人の人格 ー character ー と不可分になってしまうようなもの。人生をハックしてしまう小さな習慣。それだけが、私の興味をひきつけます。 しかしひょっとして、この「人生を変える」という言葉はあまりに濫用されているかもしれません。 安易に「人生を変える」と口にする場合、どことなく世界を「人生を変えられた人」と「まだ変えていない人」の偽りの二元論に落としこんで不安をかきたてているケースも見受けられます。「あなたには何かが足りない」こう
複雑な構造でも精密に再現できる安価な3Dプリンター「FORM 1」
プロのデザイナーが使用する3Dプリンターと同様の非常に高いクオリティで仕上げることができるのが「The Form 1」。125×125×165mmまでの立体物なら小さなものでも驚くほど精密に、なめらかな表面で作ることが可能です。 Formlabs - High Resolution Desktop 3D Printer http://formlabs.com/ FORM 1: An affordable, professional 3D printer by Formlabs — Kickstarter ムービーは以下から。 FORM 1はデスクトップ型の3Dプリンター。 本体はこんな感じ。 小さく複雑な構造のものであっても、かなり精密にプリントすることができます。 これまでの一般の3Dプリンターは細部が雑になってしまったりなめらかな表面が描けなかったりと、クオリティに問題があったのですが
2012年春。wordpressで企業サイト制作時に導入したいプラグイン13選
ちょっと前に、wordpressの知らないプラグインを発掘する大会をひとりで開催。wordpress Plugin Directoryとヤフー翻訳をそれぞれタブで開き、英検3級のDAICHIFIVEさん宅でしめやかに執り行なわれました。・・・で、今後、企業サイト製作時に必ず導入を検討するプラグインリストを作成。全部で13個あったのでABC順に紹介します。 Advanced Custom Fields http://wordpress.org/extend/plugins/advanced-custom-fields/ 以前、紹介記事を書きました。カスタムフィールドを劇的に使いやすくするプラグインです。カスタムフィールド系のプラグインでは文句なく最強です。 Contact Form 7 http://wordpress.org/extend/plugins/contact-form-7/ 説
フォーム（Form） - とほほのWWW入門
JavaScript とフォームをくみ合わせることによって、いろいろなことができます。下記の例では、2つの入力フォームに入力した値の合計を表示します。 <script> function func() { var xx = parseFloat(document.F1.T1.value); var yy = parseFloat(document.F1.T2.value); document.F1.T3.value = xx + yy; } </script> <form name="F1" action="#"> <input type="text" name="T1"> ＋ <input type="text" name="T2"> <input type="button" value="＝" onclick="func()"> <input type="text" name="T3"
jQuery – チェックボックスがチェックされたらスタイルを変更する | 1：n – DETELU Blog
なんか久々にjQueryを触りました…。 セレクタ（属性フィルタ）に変数の値を利用する場合の記述を試したんですが、1.3.1はセレクタまわりが変更になっているからなのか、IE6,7、FirefoxでOKだったのですが、safariが動作せず。 で、ちょこっと調べてみると jQuery 1.3系からはsafari2は対応してないと。そういうことですか…。 jQuery: » jQuery 1.3.1 Released ブラウザーのシュアの問題で対応をはずしてるみたいですね。しかし下記ページを見てsafari3.xが6%近いシェアがあるってのでびっくり。safariってそんなにも使ってる人いるんですかね？ Browser market share まあ一応safari2.xもOKなように1.2.6を使っておきました。 作ったものはというと、チェックボックスにチェックをした時に文字のスタイルを変
基本的なフォーム -- ごく簡単なHTMLの説明
この例をもとに、HTMLのフォームを構成する要素を順番に説明していきます。この例のHTML全体は、本章の最後で改めて紹介します。 フォームの基本枠組み データを送信するためには「何を」「どこに」「どうやって」送るかを示さなければなりません。フォームはこのための手段を提供します。 HTMLのフォームは、データを入力するための手段（コントロールと呼びます）と、それに関するラベルや説明から構成されるひとまとまりのセクションです。「何を」送信するかを示すためにこのセクションの範囲を明示し、「どこに」「どうやって」送信するかを設定します。この枠組みを提供するのがform要素です。 form要素の構造 form要素タイプは2つの主要な属性を持ちます。ひとつは「どこに」、つまりデータを受け取るプログラムを指定するaction属性、もうひとつが「どうやって」、つまりデータの送信方法を指定するmethod属
clickイベント：マウスがクリックされたとき
click イベントはマウスのカーソルが要素の上にある状態で、マウスが押されたあとで離された時に発生するイベントです。 onclick 属性または onclick プロパティに対してイベントハンドラを設定したり、 addEventListener メソッドの引数として click を指定してイベントリスナーを登録できます。ここでは JavaScript を使って click イベントが発生した場合の処理を記述する方法について解説します。
一定時間で繰り返す（setInterval）－JavaScript入門
HOME JavaScript入門 一定時間で繰り返す（setInterval） ここから、JavaScriptのタイマーについて解説していきます。 タイマーは、一定時間毎に動作を繰り返す時などに用いることができます。 スライドショーを作ったり、文字を切り替えたり流したりする時などに使用します。 このページでは文字を一文字ずつ表示する方法について見てみましょう。 setInterval()を使ったタイマーのサンプルスクリプト タイマーには2種類あって、ここではsetInterval()という命令文を使ってみます。 もう一つは次のページで解説します。 setInterval()は、一定時間毎に特定の関数を呼び出します。 では、以下のスクリプトをHTMLのBODY内に記入してみて下さい。 <form name="timer"> <input type="button" value="スタート"
演算子 - とほほのWWW入門
変数 var に値 exp を代入します。イコール(=)は等しいという意味ではなく代入するという意味を持ちます。 xx = 5; // xx に 5 を代入する yy = xx; // yy に xx の値(= 5)を代入する zz = "ABC"; // zz に文字列"ABC"を代入する 例えば、次の例を数学的に解釈すると「解無し」となってしまいますが、JavaScript ではこれを「xx という変数に、xx の値と 2 を足したものを代入する」という意味になります。あらかじめ xx に 5 が代入されていれば、xx は 7 となります。
jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
これはすごい! フォーム最適化に役立つグーグル提案のautocomplete新仕様 | 初代編集長ブログ―安田英久
※2012-04-07 セキュリティ面の問題に関して追記しました。 今日は、ウェブページの入力フォームでユーザーが楽にしかも正確に入力できるようにできる（可能性を秘めた）、新しいHTMLの仕様についての情報を。autocomplete属性に関する新しい仕様です。 グーグルは、入力フォームに自動入力する仕組みに関して、新しい仕様を提案しました。HTMLの仕様を拡張することで、ブラウザでフォームに自動入力する仕組みを使いやすくするものです。 これがうまく動作すると、フォーム入力が非常に楽になり、ミスもほぼなくなります。 どれぐらいすごいかというと、ちゃんと設定したブラウザを使うと、フォームで3クリックするだけで、一般的な項目が一気に入力されるのです。 たとえば、この状態から、 名前や住所などの標準的な項目が、一気に自動入力されます。 どうでしょう。こうした機能をサイトに設けられたら、フォームの
CSS3でつくるええ感じのテキストボックス - jsdo.it - Share JavaScript, HTML5 and CSS
<div> <p>いつものテキボ</p> <form> <input type="text" id="always" name="always" /> </form> <p>CSS3は使わないテキボ。<br>backgroundやborderなどを指定</p> <form> <input type="text" class="textbox" id="design01" name="design01" /> </form> <p>角丸やグラデなどのCSS3での装飾を加えたテキボ。<br>入力テキストにはドロップシャドウ。</p> <form> <input type="text" class="textbox" id="design02" name="design02" /> </form> <p>transitionを用いたテキボ。<br>フォーカスで入力しやすくなる。</p> <for
FredHQ - Roundabout for jQuery by Fred LeBlanc
Move Elements with Style Quickly convert simple, semantic HTML structures into a sexy interactive turntables! Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!) In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after som
Good Sleep: JavaScriptでユーザーに親切なフォーム入力
Ajaxによるフォーム入力作業のサポート｜Web Designing 5月号 フォーム入力に関するJavaScriptはいろいろありますが、Web Designing５月号「Ajaxハジメマシタ」に載っていたスクリプトもなかなか便利そうなので紹介してみます。 サンプルでは３つのライブラリが盛り込まれ、ユーザーに親切なフォーム入力が作れます。どんな機能があるかというと…、 １）空欄と入力データ形式をチェック（JSVallidareライブラリ） ２）郵便番号から住所を自動入力（AjaxZip2.0ライブラリ） ３）日付の入力時にカレンダーを表示（protocalenderライブラリ） …以上の３つです。 早速、サンプルはこちらです。 ↑このサンプルはこちらからダウンロードできます。 設定は難しくありません。本を買っていただくのが一番早いですが、簡単に説明すると… １）JSVallidareライ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://kennyqi.com/archives/68.html
リキッド・レイアウトでチェックボックスを綺麗に並べる - WebOS Goodies
はてなブログ | 無料ブログを作成しよう
