ウェブフォームデザインのための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

推薦する

JSはクリックドロップ効果を実装します

jsはクリックとドロップの特殊効果を実現します。まずは効果画像を見てみましょうさっそく始めましょう。...

js キャンバスは検証コードを実装し、検証コード機能を取得します

この記事の例では、検証コードを作成して取得するためのjsキャンバスの具体的なコードを共有しています。...

Dockerコンテナオーケストレーション実装プロセス分析

実際の開発環境や本番環境では、コンテナを独立して実行することはあまりなく、複数のコンテナを一緒に実行...

HTMLテキストの一般的なイベントとメソッドの詳細な説明

イベントの説明onactivate: オブジェクトがアクティブ要素として設定されたときに発生します。...

JavaScriptを使って動的にテーブルを生成するケースの詳しい説明

目次序文実装のアイデア実装コード成果を達成する序文これは、テーブルを動的に追加する例です。[追加] ...

Dockerイメージ解析ツールのダイブ原理解析

今日は、Docker イメージ、各レイヤーの内容を調べ、Docker/OCI イメージのサイズを縮小...

ウェブサイトのホームページを作成するための基本原則

1. ウェブサイトのホームページのハイパーテキスト ドキュメントの構成構造は、ユーザーの注意をできる...

js と jQuery での Ajax の使用例の詳細

目次ネイティブJS GETリクエストの送信方法投稿リクエストの送信方法パラメータ付きのGETリクエス...

Node.js組み込みモジュールの詳細な説明

目次概要1. パスモジュール2. モジュールまで3. fsモジュール4. イベントモジュール5. h...

Docker を使用してフロントエンド アプリケーションをデプロイする方法

Dockerはますます普及しています。環境を軽量かつ柔軟に分離し、容量を拡張し、運用保守管理を容易に...

ソースコードの観点からキープアライブコンポーネントのキャッシュ原理に答える

今日は、早速本題に入り、面接中に尋ねられた質問、つまりキープアライブ コンポーネントのキャッシュ原理...

Linuxでmore、less、catコマンドを使用してファイルの内容を表示します

Linux では、cat、more、less の各コマンドを使用してファイルの内容を表示できます。c...

Vue3 カプセル化された虫眼鏡コンポーネントのサンプルコード

目次コンポーネントインフラストラクチャ目的: 画像拡大鏡機能を実現するvueuseをインストールする...

MySQL データベースの基礎を始めるための一般的なコマンドの概要

この記事では、MySQL データベースの基礎を学ぶためによく使用されるコマンドを例を使って説明します...

react+antdプロジェクトをゼロから構築する方法を教えます

これまでの記事はすべて私自身の学習記録であり、主に以前に遭遇した落とし穴を忘れないようにするためのも...