【初心者向け】0からformがわかる｜HTMLでのフォーム作成
HTMLを学習する中でフォームは難易度が高いテーマの1つだけど、フォームは本当に様々な場面で使用されることが多い要素なんだ。 たとえばTwitterやFacebookのログイン画面や美容院の予約時の情報入力などでもフォーム要素は使用されている。逆を言えばフォームをマスターすることでサイト制作の可能性がグッと広がるとも言えるよね！ フォームの学習に必要なステップ htmlでフォームを完全にマスターしようとすると次のような学習のステップが必要になります。 まずはフォームの表示とデザインの調整です。フォームの表示はHTMLを書き、フォームのデザイン（見た目）はCSSを書いて調整します。 続いてフォームの動作処理です。たとえばお問い合わせフォームなら、あなたが入力した情報がwebサイトの持ち主に届き、あとからあなた宛にメールが届いたりしますよね。 このような「ユーザーが入力した情報をメールで送った
フォームデザインをレベルアップ！正しいラジオボタンとチェックボックスの使い方 | アドビUX道場 #UXDojo
フォームデザインをレベルアップ！正しいラジオボタンとチェックボックスの使い方 | アドビUX道場 #UXDojo 連載 エクスペリエンスデザインの基礎知識 フォームをデザインするとき、オプション選択のためのUI要素を選ぶ場面があるでしょう。その際の候補は、チェックボックス、トグルボタン、ラジオボタン、ドロップダウンなどさまざまありますが、この記事では、ラジオボタンとチェックボックスを取り上げます。この2つはとても単純であるにも関わらず、インタラクションデザインの観点から誤った使われ方をすることが少なくありません。 ラジオボタンとチェックボックスの基本動作 ラジオボタンは昔のラジオに使われていた、局を切り替えるためのボタンから名付けられました。あるボタンを押すと他の押されていたボタンが元の位置に飛び出します。そのため、常に一つのボタンだけが”押された状態”になります。 ラジオボタンのUI要素
CSSでラジオボタンとチェックボックスにスタイルを当てる - Qiita
label には :before と :after 擬似要素を使い、グレーの角丸とアイコンを表現しています。 ラジオボタンは角丸で円を、チェックボックスは二辺のみborderを付けた要素を45度回転させています。 モダンブラウザ IE9+ android4.0系標準ブラウザ iOS7 Safari コード <form action=""> <section> <h2>radio</h2> <input type="radio" name="hoge" value="高坂さん" checked id="radio01" /> <label for="radio01" class="radio">高坂さん</label> <input type="radio" name="hoge" value="南さん" id="radio02" /> <label for="radio02" class=
CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた | カルアカはWebが無料で学べる
こんにちは、リードスペースです。 ラジオボタンやチェックボックスってブラウザー依存のデフォルトデザインだと少し味気ないですよね？ 今回は、CSSでラジオボタンやチェックボックスをオリジナルデザインでカスタマイズする方法について根掘り葉掘り説明します。 ズバリ、labelタグを使う ラジオボタンやチェックボックスなどに使用するinputタグはcssで装飾できないという難点があります。 そこでラジオボタンやチェックボックスを装飾するのに役立つのが「label」タグです。 「label」とは、チェックボックス、ラジオボタンなどの構成部品とその項目名を関連付けるためのタグです。 関連付けを行えば、ブラウザでlabelタグをクリックしただけでも、その構成部品をクリックしたものと同じ動きをしてくれます。 指定方法その1・フォームパーツのidとlabelタグのforの値を同じにする 下記のようにidとf
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
