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

推薦する

HTML フローティング フレーム (iframe 読み込み HTML) の設定と使用の例

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

MySql バッチに挿入するときにデータの重複を避ける方法

目次序文1. ignore を挿入2. 重複キーの更新時3. を置き換える要約する序文Mysql は...

JavaScript で配列遅延評価ライブラリを実装する方法

目次概要達成方法具体的な実装評価関数の終了を決定する生成関数の範囲変換関数マップフィルター割り込み機...

スクロールバーのスタイルを設定するための CSS サンプルコード

スクロール バーのスタイルを設定するための CSS 実装コードは次のとおりです。 •::-webki...

jQueryはシンプルなコメントエリアを実装します

この記事では、参考までに、簡単なコメントエリアを実装するためのjQueryの具体的なコードを紹介しま...

指定したディレクトリに nginx をインストールする方法の例

会社の要件により、異なる場所にある 2 つの nginx サーバーを同じマシンにインストールする必要...

Ubuntuの基本設定: openssh-serverのインストールと使用

Ubuntu 17.10 での openssh-server のインストールと使用を記録します。イン...

VMware Workstationはデバイス/資格情報ガードと互換性がありません

仮想マシンをインストールするときに、「VMware ワークステーションはデバイス/資格情報ガードと互...

Docker ベースの Jenkins のデプロイに関する詳細なチュートリアル

このドキュメントを作成した当時は2019年12月頃で、er2.200が最新バージョンでした。 1.画...

Python MySQL データベース テーブルの変更とクエリ

Python は MySQL に接続してデータベース テーブルを変更およびクエリします。 pytho...

mysql 5.7.19 最新バイナリインストール

まず、公式ウェブサイト http://dev.mysql.com/downloads/mysql/ ...

Linux スワップメモリ​​を拡張する方法

スワップ メモリとは、主に物理メモリが不足している場合に、システムがハード ディスク領域の一部をサー...

ウェブページのメモリ使用量とCPU使用量を削減する方法

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...

Vueは画像のドラッグと並べ替えを実装します

この記事の例では、画像のドラッグと並べ替えを実装するためのVueの具体的なコードを参考までに共有して...