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

推薦する

Vueカウンターの実装

目次1. カウンターの実装2. 成果を達成する1. カウンターの実装ページにカウンターを実装するだけ...

HTML フォーム コンポーネントのサンプル コード

HTML フォームは、さまざまな種類のユーザー入力を収集するために使用されます。次のコードは、HTM...

iframe を使用して Web ページに他の Web ページを埋め込む方法

iframe の使い方:コードをコピーコードは次のとおりです。 <DIV align=cent...

Docker Swarm を使用して分散クローラー クラスターを構築する例

クローラーの開発プロセス中に、クローラーを複数のサーバーに展開する必要がある状況に遭遇したことがある...

MySQL Binlog ログ処理ツールの比較分析

目次運河マクスウェルデータバスAlibaba Cloud のデータ転送サービス (DTS)運河ポジシ...

Vue+element はローカル検索機能付きのドロップダウン メニューを実装します

必要:バックエンドは配列オブジェクトを返し、それがフロントエンドで配列に結合されます。配列は名前に従...

Dockerでイメージ情報を表示する方法

この記事では、Dockerでイメージ情報を表示する方法を学ぶ必要があります。 1. imagesコマ...

bodyタグの主な属性の概要

bgcolor="テキストの色" background="背景画像&q...

HTML フォームタグチュートリアル (3): 入力タグ

HTML フォーム タグのチュートリアル。このセクションでは、主に Web ページで INPUT タ...

ローカルでビルドした Docker イメージを Dockerhub に公開する方法

今日は、ローカルの Docker プロジェクト イメージを dockerhub に公開する方法を紹介...

初心者向けウェブサイト構築チュートリアル: 10 日間でウェブサイトの構築方法を学ぶ

10 日間のチュートリアルでは、最も理解しやすい言語を使用し、最も基本的なことから始めて、誰もが W...

Vueプラグインの書き方を説明する記事

目次プラグインとはプラグインの作成プラグインの使用要約するプラグインとはVue フレームワークでは、...

Linux 上での MySQL データベースのインストールと Java プロジェクトの構成に関する詳細なグラフィック説明

1. MySQLデータベースをインストールする① ダウンロードして解凍し、/opt/softディレク...

Linux での MySQL 5.7.16 無料インストール バージョンのグラフィック チュートリアル

この記事では、参考までにMySQL 5.7.16の無料インストール版のチュートリアルを紹介します。具...

CentOS 6.4 MySQL 5.7.18 のインストールと設定方法のグラフィックチュートリアル

Centos6.4 で mysql5.7.18 をインストールするための具体的な手順が全員に共有され...