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

推薦する

XHTML 2.0 新機能プレビュー

<br />ブラウザが次世代のXHTMLを処理できるようになる前に、このよりリッチなコン...

CSS3で背景画像にカラーマスクを追加する方法

以前、開発中に背景レイヤーにカラーマスクを追加する必要のあるプロジェクトに遭遇しました。ここでは、背...

VUEはFlappy Birdゲームのサンプルコードを実装します

Flappy Bird は、誰もがアプリでプレイしたことがある非常にシンプルな小さなゲームです。ここ...

ショッピングカートの計算を実現する js メソッド

この記事の例では、ショッピングカートの計算を実装するためのjsの具体的なコードを参考までに共有してい...

Linuxファイルの基本属性の知識ポイントのまとめ

Linux システムは典型的なマルチユーザー システムです。異なるユーザーは異なる立場にあり、異なる...

高い同時実行性の下でNginxのパフォーマンスを最適化する方法をまとめます

目次特徴利点インストールとコマンド設定ファイルプロキシモードとリバースプロキシ構成フォワードプロキシ...

MySQL の完全バックアップとクイックリカバリ方法

過去 15 日間のデータをバックアップするシンプルな MySQL 完全バックアップ スクリプト。バッ...

リアクトルーティングガード(ルーティングインターセプション)の実装

React は Vue とは異なります。ルートにメタ文字を設定することでルートインターセプションを実...

Dockerモードで起動したTomcatのホームページにアクセスすると404エラーが発生する

シナリオ: docker で tomcat を起動すると (Alibaba Cloud からダウンロ...

10分でDockerを使ったマイクロサービスのデプロイ方法を学ぶ

Docker は 2013 年のリリース以来、広く注目され、ソフトウェア業界を変える可能性を秘めてい...

HTML の著作権記号のフォント選択問題 (著作権記号をより美しくする方法)

1. 問題を発見する&copy; は HTML の著作権記号ですが、間違ったフォントを選択す...

Nginx で Http、Https、WS、WSS を設定する方法

前面に書かれた今日のインターネット分野では、Nginx は最も広く使用されているプロキシ サーバーの...

CSSのline-heightを継承する方法

Line-height はどのように継承されますか?30px などの特定の値を書き込むと、この値が継...

MySQL のあまり知られていないソート方法

序文ORDER BY 字段名升序/降序、このソートステートメントは皆さんご存知だと思いますが、特殊な...

dockerコンテナにvimをインストールするソリューション

目次物語の始まりvimをインストールし、hadoop-hive.envを編集します。不注意で回避しま...