お問い合わせ

    氏名

    メールアドレス

    件名

    メッセージ本文



    763万 キーワード

    2021年 検索パフォーマンス

    57.8万 人が訪問

    2021年 訪問ユーザー数

    WordPressのスキルアップはこちら!▶[click]
    いま、どうしてる? 誰でも検索できます

    【CSS】HTMLのinputで入力フォームを作る基本方法&CSSでフォームのデザインを変える方法[1/3]

    CSS(シーエスエス)
    この記事は約3分で読めます。
    「ワードプレスで未来を変える!」
    誰でも挑戦できます!!
    【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して未来を変えたい!という方をお待ちしています↓↓

    WEBページでよく見る「入力フォーム」ですが、今回はHTMLのinputでの入力フォームの作り方の基本とCSSでデザインする方法についてご紹介をしていきます。

    入力フォーム要素

    HTML のinput要素は、ユーザーからデータを受け取るための、ウェブベースのフォーム用の対話的なコントロールを作成するために使用します。端末とユーザーエージェントによりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。 要素は入力型と属性の組み合わせの数が非常に多いため、 HTML の中で最も強力かつ最も複雑な要素の一つです。

    https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

    input type=”text”

    まずは、基本の「インプットテキスト」です。フォームにテキストを入力することができます。

    <input type=”text”~と入力することで作成できます。終了(/)側のタグはありません。

    こちらはMDNのサンプルコードですが、この場合、4文字以上8文字以下の文字を入力することができます。requiredが設定されていると必須入力という指定になります。

    <input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">

    少し変えてみました。size=”50″とすることで横幅が伸びます。

    <input type="text" id="name" name="name" required minlength="4" maxlength="8" size="50">

    placeholderで予め文字を入れておく方法

    placeholderを使うことで、テキストボックス内に予め文字を入れておくこともできます。Youtubeのコメント欄で見る「公開コメントを入力…」と出ている文字ですね。

    <input type="text" id="text04" name="text04" placeholder="テスト" minlength="4" maxlength="8" size="10">

    CSSでテキストボックスを装飾する方法

    CSSでフォームのデザインを装飾してみます。

    クラス名やIDを指定した後に(指定しなくても変わりますがサイト中のインプットテキストが変わってしまいますのでクラス・IDの指定推奨です)、input[type=’text’]と指定することで、装飾できます。

    #text05 input[type='text']{
    border-color: #da3c41;
    }

    入力フォームにフォーカスした時に色が変わる

    入力フォームをクリックした時に色が変わるようにするには、:focusを使います。

    input[type='text']#text06:focus {
    border: 1px solid #da0041;
    outline: none;
    box-shadow: 0 0 10px 1px rgba(100,100,65, .5);
    }

    フォームをクリックしたタイミングで、入力部分の色が変わります。

    まとめ

    まずは、入力フォームの基本「text」についてでした。次回はCSSで色々と装飾をする方法について書いていきたいと思います。

    ご参考ください😃

    サンプルページはこちら

    サンプルページ
    Loading
    タイトルとURLをコピーしました