ウェブフォームデザインのための5つの実用的なヒント

ウェブフォームデザインのための5つの実用的なヒント

1. フォームテキスト入力のモバイル選択: テキスト入力フィールドにプロンプ​​トが追加されている場合、訪問者はマウスでプロンプトを選択して削除し、有用な情報を入力する必要があります。実際、<textarea> に onMouseOver="this.focus()" onFocus="this.select()" コードを追加するだけで、すべてが次のようにずっと簡単になります。

引用内容は以下のとおりです。
<textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">お名前を入力してください</textarea>
同様に、<input> にコードを追加することもできます。
2. クリックしてフォーム入力ユニットを削除します。この列は上記の列と同様の機能を持っていますが、マウスの使用方法が少し異なります。上記のようにマウスで覆うのではなく、クリックする必要があります。のように:
引用内容は以下のとおりです。

<input type=text name="address" size=19 value="メールアドレスを入力してください" onFocus="this.value=''">
入力部をクリックするとプロンプト情報が削除されます。便利ですよね?
3. フォーム入力ユニットの境界線設定: 従来のフォームユニットの境界線を変更すると、ホームページがよりカラフルになります。のように:
引用内容は以下のとおりです。

<input type=radio name=action value=subscribe チェック済み style="BORDER-BOTTOM: 破線 1px; BORDER-LEFT: 破線 1px; BORDER-RIGHT: 破線 1px; BORDER-TOP: 破線 1px;background-color: #FEF5C8">
このうち、「style=***」は左、右、上、下、背景色の設定で、他のユニットにも適用されます。
4. フォーム入力セルのテキスト設定: フォーム内のセルのフォントは次のように変更できます。
引用内容は以下のとおりです。

<input type=text name="address" size=19 value="お名前を入力してください" style=font-family:"verdana";font-size:10px >
このうち、「style=***」はフォントとフォントサイズの設定です。
5. フォームのプロパティをポップアップ ウィンドウに変更します。ほとんどのフォームはアクティブ化されると現在のページで開かれ、通常のブラウジングに影響します。次のように変更した方が良いでしょう。
引用内容は以下のとおりです。
<フォームメソッド=POSTアクション=URLターゲット=_空白>
「target=_blank」はポップアップウィンドウのオープンを制御するために使用されます。

<<:  MySQLの不合理なMaxIdleConnsにより接続が短くなる

>>:  JDカルーセル効果を実現するための純粋なHTMLとCSS

推薦する

JavaScript プロトタイプのデータ共有とメソッド共有の実装を調べる

データ共有プロトタイプにはどのようなデータを書き込む必要がありますか?共有する必要があるデータはプロ...

MacOS での MySQL 8.0.18 のインストールと設定方法のグラフィック チュートリアル

この記事では、MacOSでのMySQL 8.0.18のインストールと成功したコマンドライン操作を記録...

IE ブラウザの HTML ハック タグの概要

コードをコピーコードは次のとおりです。 <!--[if !IE]><!-->...

きちんとした標準的なHTMLタグの書き方を学ぶ

優れた HTML コードは美しい Web サイトの基礎となります。私が CSS を教えるときは、まず...

よく忘れられがちな CSS のヒント 26 選

これは、よく使われるけれども忘れられがちな CSS 実装方法のコレクションです。抜けや追加があれば、...

MySQL 8.0.22.0 のダウンロード、インストール、設定方法のグラフィックチュートリアル

MySQL 8.0.22のダウンロード、インストール、設定方法、参考までに具体的な内容は次のとおりで...

Vueメソッドに基づくシンプルなタイマーの実装

Vueのシンプルなタイマーを参考にしてください。具体的な内容は以下のとおりです原理: setInte...

MySQL が UNION を使用して 2 つのクエリを接続できない理由の詳細な説明

概要連合接続データセットキーワードは、2つのクエリ結果セットを1つに連結し、同一のレコードを除外する...

Vueはシンプルなタイマーコンポーネントを実装します

プロジェクトを実行すると、リアルタイム更新、広告アニメーションの連続表示などの要件に遭遇することは避...

LinuxでifconfigとaddrがIPアドレスを表示できない問題を解決する

1. 仮想マシンにLinuxシステムをインストールし、仮想マシンを起動し、rootとパスワードを入力...

ブラウザのキャッシュを防ぐために、js または css の後に ?v= バージョン番号を追加します。

コードをコピーコードは次のとおりです。 <span style="font-size...

Vue-router ネストルーティングの詳細な説明

目次ステップ1. ルーティング ルールを設定し、子構成項目を使用します。 2. ジャンプ(フルパスを...

初心者でもjsのtypeofとinstanceofの違いを理解できます

目次1. 型2. インスタンス3. 違い1. 型typeof 演算子は、評価されていないオペランドの...

TypeScriptのインストールと使用方法と基本的なデータ型

最初のステップはTypeScriptをグローバルにインストールすることですnpmを使用してインストー...

Linux ネットワークプログラミングにおけるソケットオプションの実装

ソケットオプション機能機能: ソケットファイル記述子の属性の読み取りと設定に使用されるメソッド #i...