CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS入力

Webフォームは、多くのWebサイトの重要な部分であり、Webサイトの運営者がユーザーからの入力を受け入れることを可能にします。たとえば、Webフォームを使用して、Webサイトの電子メールニュースレターにサインアップするユーザーの電子メールアドレスを受け入れることができます。

CSSを使用すると、カスタムスタイルを追加してWebページの入力を形成できます。これにより、訪問者が情報を送信するために使用できる、見た目に美しいフォームフィールドを作成できます。

このチュートリアルでは、例を使用して、HTML入力の基本と、CSSを使用してWebページの入力フィールドのスタイルを設定する方法について説明します。このチュートリアルを読み終えると、CSSを使用した入力フィールドのスタイル設定のエキスパートになります。

HTMLおよびCSS入力

Webページでフォームを定義するには、HTMLを使用する必要があります。 HTML言語を使用すると、フォームの構造（どのフォームフィールドが表示され、どこに表示されるか）を定義できます。次に、CSSを使用して、フォームの要素にカスタムスタイルを適用できます。

HTMLでは、タグは、フォームへのユーザー入力を受け入れるために使用されます。 HTMLのの基本的な構文は次のとおりです。

<input type="typeOfInput">

CSS入力 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

HTML入力について詳しく知りたい場合は、HTML入力の初心者向けガイドをお読みください。ユーザーの名前を受け入れるフォームフィールドの基本的な例を次に示します。

<label for="userName">Name</label>
<input type="text" name="userName">

CSS入力 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

入力フィールドは、タグのデフォルトのHTMLスタイルを使用しますが、これはかなり基本的なものです。また、

CSS入力

CSSを使用してフォーム要素のスタイルを設定する方法の例をいくつか見ていきましょう。

入力の幅の設定

フォームを送信する人の名前を収集する地元の切手クラブのフォームフィールドを設計しているとします。このフォームは、Webページの幅の50％を占める必要があります。次のコードを使用してこのフォームを作成できます：

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	width: 50%;
}

CSS入力 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

この例では、Webページの幅の50％に等しいフォームフィールドを作成しました。

HTMLコードでは、

境界線付きの入力

シアトルスタンプクラブは、水色がクラブの色であるため、各フォームフィールドの周囲に水色の境界線を追加するように依頼しました。境界線の幅は3pxである必要があります。 borderプロパティを使用して、各フォーム入力フィールドの周囲に境界線を追加できます。

入力フィールドの周囲に境界線を追加するために使用するコードは次のとおりです。

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightblue;
}

CSS入力 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

このコードでは、境界線スタイルを使用して、入力フィールドの周囲に境界線を追加します。この境界線の太さは3pxです。ご覧のとおり、フォームフィールドには水色の境界線があります。

CSSボーダーについて詳しく知りたい場合は、CSSボーダーの究極のガイドをお読みください。

下枠付き入力

さらに、フォームの特定のエッジに境界線を追加することもできます。したがって、フィールドの下部にのみ境界線を表示する場合は、border-bottomプロパティを使用できます。使用するコードは次のとおりです。 

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border-bottom: 3px solid lightblue;
}

CSS入力 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

このコードでは、border-bottomプロパティを使用して、入力フィールドの下部に境界線を追加します。

パディング付き入力

Seattle Stamp Clubから、フォームのコンテンツ（ユーザーが情報を入力するスペース）とフォームの境界線の間にスペースを表示するように依頼されました。

クラブは、上下の境界線とフォームのコンテンツの間に10pxのパディングを表示することを望んでいます。クラブはまた、左右の境界線とフォームのコンテンツの間に15pxのパディングを表示することを望んでいます。

このタスクは、次のコードを使用して実行できます。

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	padding: 10px 15px;
	box-sizing: border-box;
}

CSS入力 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

この例では、パディングスタイルを使用して、フォームフィールドのコンテンツとフォームフィールドの境界線の間にパディングを適用しました。最初の値（10px）は上端と下端のパディングを設定し、2番目の値（15px）は左端と右端のパディングを設定します。

また、box-sizingプロパティの値をborder-boxに設定しました 。これにより、要素の全幅にパディングが含まれるようになります。

CSSパディングプロパティについて詳しく知りたい場合は、CSSパディングのガイドをご覧ください。

集中入力のあるスタイル

ほとんどのブラウザでは、フォームフィールドをクリックすると、青いアウトラインがフィールドに追加されます。この機能は、現在注目しているフォームを強調するために使用されます。

ただし、：focusCSSセレクターを使用してこれをカスタマイズできます。 Seattle Stamp Clubから、ユーザーがフォームをクリックしたときに、フォームの下部に薄い灰色の境界線を追加するように依頼されました。このコードを使用してこれを行うことができます：

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input:focus {
	outline: none;
	border-bottom: 3px solid lightgray;
}

CSS入力 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

Webフォームは、デフォルトのHTMLスタイルを使用して表示されます。ただし、フォームをクリックすると、幅3pxの薄い灰色の境界線がフォームの下部に適用されます。

これは、ユーザーが入力フィールドをクリックしたときにスタイルを適用できる：focusセレクターを使用したためです。また、outline：noneルールを使用しました。これは、ユーザーがフォーム入力フィールドをクリックしたときにデフォルトの青いアウトラインが表示されないようにするものです。

フォーカスセレクターの詳細については、CSS：focusセレクターのガイドをご覧ください。

角が丸い入力

Seattle Stamp Clubから、入力フィールドのすべてのエッジの周りに明るい灰色の境界線を追加し、入力の角を丸めるように依頼されました。これは、border-radiusプロパティを使用して行うことができます。これにより、rounded cornersを作成できます。 CSSでの効果。

角が丸いフォームフィールドを作成するために使用するコードは次のとおりです。

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightgray;
	border-radius: 10px;
}

CSS入力 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

この例では、入力フィールドの周囲に表示される幅3pxの薄い灰色の境界線を定義します。次に、border-radiusプロパティを使用して、フォームフィールドの角を丸めます。

WebページのHTML要素に丸みを帯びた角を適用する方法について詳しく知りたい場合は、CSSの丸みを帯びた角のガイドをお読みください。

背景色で入力

Seattle Stamp Clubから、最終的なフォームフィールドを1つ作成するように依頼されました。このフォームフィールドには、幅3pxの明るい灰色の境界線と、水色の背景が必要です。

次のコードを使用して、このフォームフィールドを作成できます。 

<html>

<label for="userName">Name</label>
<input type="text" name="userName">

<style>

input {
	border: 3px solid lightgray;
	background-color: lightblue;
}

CSS入力 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

このコードでは、borderプロパティを使用して、入力フィールドの周囲に幅3pxの薄い灰色の境界線を定義しました。次に、background-colorプロパティを使用して、フォームフィールドの背景色を水色に設定しました。

特定の入力フィールドにスタイルを適用する

このチュートリアルでは、フィールドにスタイルを適用する方法について説明しました。ただし、特定の入力タイプにのみスタイルを適用できる方法があります。

そこで、属性セレクターが登場します。inputを使用する代わりに スタイルで、特定の入力のみにスタイルを適用する場合は、次のいずれかのセレクターを使用してみてください。

  • input [type =text]：すべてのテキストフィールドにスタイルを適用します。
  • input [type =email]：すべてのメールフィールドにスタイルを適用します。
  • input [type =password]：すべてのパスワードフィールドにスタイルを適用します。
  • input [id =userName]：IDがuserNameの要素にスタイルを適用します 。

属性セレクターの仕組みの詳細については、CSS属性セレクターのキャリアカルマガイドをご覧ください。

結論

CSSを使用することで、見た目に美しく機能的なカスタムデザインのWebフォームを作成できます。まず、HTMLを使用してフォームの構造を設計し、次にCSSスタイルを使用してフォームにスタイルを適用できます。

このチュートリアルでは、例を参照して、HTML入力の基本と、CSSを使用して入力フィールドのスタイルを設定する方法について説明しました。これで、CSSを使用する専門家のように入力フィールドのスタイルを設定するために必要な知識を身に付けることができます。


  1. フォーム入力フィールドのあまり知られていないCSSプロパティ

    CSSのcaret-color、pointer-events、およびtab-sizeは、フォーム入力フィールドのあまり知られていないプロパティの一部です。 caret-colorプロパティを使用すると、点滅するカレットの色を指定できますが、pointer-eventsを使用すると、ユーザーが要素を見つけられないようにすることができます。最後に、tab-sizeは、tabが使用する空白の量を設定します。 次の例は、これらのプロパティの一部を示しています。 例 <!DOCTYPE html> <html> <head> <style> body {

  2. HTMLデザインフォーム

    サイト訪問者からデータを収集する場合は、HTMLフォームが必要です。たとえば、ユーザー登録時に、名前、メールアドレス、クレジットカードなどの情報を収集したい場合。 フォームはサイト訪問者から入力を受け取り、CGI、ASPスクリプト、PHPスクリプトなどのバックエンドアプリケーションに送信します。バックエンドアプリケーションは、内部で定義されたビジネスロジックに基づいて、渡されたデータに対して必要な処理を実行します。アプリケーション。 タグはHTMLでフォームを作成するために使用され、input、textareaなどのさまざまなフォーム要素が含まれています- <form action