CSS設定フォーム-フロントエンドQ&A-php.cn

CSS設定フォーム

PHPz

リリース： 2023-05-09 10:11:37

オリジナル

1593 人が閲覧しました

インターネットとモバイルデバイスの普及に伴い、フォームは Web サイトやアプリケーションで最も一般的に使用される要素の 1 つになりました。フォームはユーザーの基本情報の収集、検索の実行、コンテンツの送信などを行うことができ、インタラクションデザインやユーザーエクスペリエンスデザインの非常に重要な部分となっています。スタイルを正しく設定すると、フォームの使いやすさと美しさが大幅に向上し、ユーザーの満足度とコンバージョン率が向上します。この記事では、CSS を使用してフォームのスタイルを設定する方法について説明します。

1. フォームの基本構造

HTML では、フォームは通常、form タグと、一連の input、select、textarea、その他のフォームコントロールで構成されます。最も単純なフォーム構造は次のとおりです。

<form>
  <label>用户名：<input type="text" name="username"></label>
  <label>密码：<input type="password" name="password"></label>
  <input type="submit" value="提交">
</form>

ログイン後にコピー

label ラベルはフォームコントロールとフォーム説明テキストを関連付けるために使用され、type 属性はコントロールの種類を指定し、name 属性はフォームデータを送信するときに名前を付けるために使用されます。

2. フォームでよく使用されるスタイル設定

フォントとフォントサイズを統一する

スタイルでフォームコントロールのフォントとフォントサイズを指定するフォームをすっきりと一貫して見せ、読みやすさと美しさを向上させることができます。コード例は次のとおりです。

form {
  font-family: Arial, san-serif;
  font-size: 14px;
}

ログイン後にコピー

デフォルトの外観と境界線を削除する

ほとんどのブラウザには、フォームコントロールの外観と境界線が付属していますが、これらのデフォルトのスタイルはありません。弊社の設計要件を満たしていない可能性があります。これらのデフォルトの外観と境界線を削除するには、次のコードを使用できます。

input[type=text], input[type=password], textarea {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  background-color: #f5f5f5;
  padding: 5px;
}

ログイン後にコピー

ここでは、CSS の外観プロパティと -webkit-Appearance プロパティを使用して、フォームの外観をなしに設定し、境界線とアウトラインを削除します。背景色とパディングを追加しました。

テキストボックスとパスワードボックスの幅を設定する

デフォルトでは、テキストボックスとパスワードボックスの幅はコンテンツに応じて適応されます。フォームを視覚的にすっきりさせるために、幅を 300 ピクセルなどの固定値に設定できます。コード例は次のとおりです:

input[type=text], input[type=password], textarea {
  width: 300px;
}

ログイン後にコピー

ドロップダウンボックスのスタイルを調整する

ドロップダウンボックスのデフォルトの外観は要件を満たしていない可能性があります。次のコードを使用してスタイルを調整します。

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 960'><path d='M870.4 358.4l-358.4 358.4-358.4-358.4c-19.2-19.2-51.2-19.2-70.4 0-19.2 19.2-19.2 51.2 0 70.4l384 384c9.6 9.6 22.4 14.4 35.2 14.4s25.6-4.8 35.2-14.4l384-384c19.2-19.2 19.2-51.2 0-70.4-19.2-19.2-51.2-19.2-70.4 0z'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 20px;
  padding-right: 25px;
}

ログイン後にコピー

ここでは、Appearance と -webkit-Appearance を none に設定し、デフォルトの外観を削除してから、CSS を使用してドロップダウンボックスの矢印の背景画像を作成し、最後にbackground-image、background-repeat、background-position、background-size 属性を使用して、ドロップダウンボックスに適用します。

送信ボタンのスタイルをデザインする

送信ボタンはフォームの最も重要なコンポーネントであり、通常は通常のボタンと区別できるようにデザインする必要があります。次のコードを使用してスタイルを設定できます:

input[type=submit] {
  background-color: #01aef0;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

ログイン後にコピー

ここでは、ボタンの背景色は #01aef0 に設定され、前景色は白に設定され、境界線が削除され、丸い角とパディングが設定されます。が設定され、フォントサイズが 16 ピクセルに設定され、最後にカーソル属性を使用してカーソルを手の形に変更し、ボタンの対話性を高めます。

3. 概要

フロントエンド開発や Web デザインにおいて、フォームは間違いなく非常に重要な要素であり、正しいスタイル設定によりフォームの使いやすさと美しさが向上し、エクスペリエンスとコンバージョンの両方が非常に重要な役割を果たします。この記事では、CSS でよく使われるフォームスタイルの設定を紹介します。それぞれのスタイルは、単独で使用すると独立したツールのようなものですが、実際の運用では、状況に応じて柔軟に組み合わせて、要件を満たす完全なフォームスタイルを形成する必要があります。設計要件。

以上がCSS設定フォームの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。