• HOME
  • HTML/CSS
  • HTMLで文字を打つ入力欄をつくる方法(デザインの例も紹介)
  • HTML/CSS
  • html
  • textarea

HTMLで文字を打つ入力欄をつくる方法(デザインの例も紹介)

HTMLで文字を打つ入力欄をつくる方法(デザインの例も紹介)

「HTMLで入力欄をつくってみたいけど、やり方がわからない…。」そんなお悩みありませんか？

この記事では「HTMLで入力欄をつくる方法」「入力欄のデザイン3選」「入力欄をつくる場面」について解説していきます。

それでは、まず入力欄のつくり方からみていきましょう。

HTMLで文字を打つ入力欄をつくる方法

HTMLで入力欄をつくるときは、以下の2つのタグを書きます。

  1. inputタグ
  2. textareaタグ

それぞれ具体的に解説していきます。

inputタグ

inputタグは、「一行におさまる入力欄をつくるためのタグ」になります。

メールアドレスや電話番号、住所などを入力する欄をつくるときに使われます(お問い合わせフォームなどでよく見かけますね)。

コードは以下のように書きます。

<input type="text">

このコードを出力すると、以下のようになります。

また、このタグは基本的に「属性」をつけます。

よく使う属性としては、「type」「name」「placeholder」などが挙げられます。

type属性は、デフォルトでは「type=”text”」になっています。単に文字を入れるボックスをつくる場合はこれでOKです。他には、パスワードを入れる欄をつくる場合の値「type=”password”」、メールアドレスを入れる場合の値の「email」などがあります。

name属性は、inputのタグに名前をつけるために使います。ここに関してはサーバー側の話になるのでくわしくは割愛します。

placeholder属性をつけると、文字を入れる欄の背景に薄い文字を表示させることができます。

<input type="text" placeholder="氏名">

(↓文字を入力すると背景の文字が消えます)

これらはよく使う属性なので覚えておきましょう。

一行の入力欄をつくるときはinputタグを使いましょう。

textareaタグ

textareaタグは、「複数行にわたり入力する入力欄をつくるためのタグ」になります。

お問い合わせ内容を入力する欄をつくるときなどに使います。

コードは例えば以下のように書きます。

<textarea cols="30" rows="10"></textarea>

inputタグと違い、閉じタグがあります(</ textarea>のことです)。

このコードを出力すると以下のように表示されます。

inputタグ同様、textareaタグも属性を使用します。

上の例では、「cols属性」「rows属性」を使いました。

colsはcolumns(縦列)の略で、rowsは「行」と言う意味です。

これらの属性の値を決めることで、タテとヨコの長さを変えます。

複数行の入力するための入力欄をつくるときは、textareaタグを使いましょう。

入力欄のよくあるデザイン3選

入力欄のよくあるデザインとして以下の3つを紹介します。

  1. 角に丸みをつける
  2. 外枠の線の色を変える
  3. 下線のみにする

それぞれ解説していきます。

角に丸みをつける

まず、1つ目のデザインは「角に丸みをつける」です。

角に丸みをつけることで、やわらかくて今風のデザインになります。

例えば以下のようにします。

<input type="text" />
input {
  border-radius: 7px;
}

角に丸みをつけるために、CSSの「border-radius」プロパティを使いました。

機会があれば入力欄の角に丸みをつけるデザインを参考にしてみてください。

外枠の線の色を変える

2つ目は「入力欄の外枠の色を変える」です。

ここでいう外枠の色は、通常時の色ではなく、フォーカス(入力欄をクリックして起動する)ときの色のことです。

コードを以下のように書きます。

<input type="text" />

input:focus {
  outline: none;
  border: 1px solid orangered;
}

「:focus」と書くことで、入力欄を起動させたときのCSSを設定することができます。

また、「outline: none;」とすることで、デフォルトの枠線を消すことができます。

このコードで、入力欄をクリックすると下のようになります。

外枠の色を変えられるということも覚えておいてください。

下線のみにする

3つ目は「入力欄を下線のみにする」です。

下線のみの入力欄にすることで、今風の洗練されたデザインになります。

たとえば、以下のようなかたちです。

<input type="text" placeholder="氏名">
input {
  border-top: none;
  border-right: none;
  border-left: none;
}

下線のみにするためには、CSSのborderプロパティを使います。

下の線(border-bottom)以外の、上と右と左の線を「none」の値で表示させないようにしましょう。

入力欄をつくる場面

ここまで、入力欄のつくり方とデザインについて見てきました。

入力欄をつくる場面はどこでしょうか。

結論からいうと、「お問い合わせフォーム」「ユーザー情報の登録ページ」や、「検索ワードの入力フォーム」などです。

逆に言うとそれら以外ではinputタグやtextareaタグは基本使いません。

なので、HTMLでコーディングしているときにすごく出現するというわけではないです。

ただし、ユーザー情報の入力ページや検索フォームで入力欄をつくる場面ではinputタグやtextareaタグは必須なので、おさえておきましょう。

まとめ

いかがでしたか？

HTMLの入力欄のつくり方が明確になったと思います。

入力欄をつくるにはinputタグとtextareaタグを使いましょう。

また、今回挙げたデザインも参考にしてみてください。

実際にコーディングしてみて知識を定着させてみてください！