【HTML入門】textareaタグの基本的な使い方を徹底解説！　byウェブカツ

フォームを作る時、お問い合わせ内容などユーザーにテキストを入力してもらいたい時によく使うのが**textarea**。だが、同じテキストを入力できる**<input type="text">**との使い分けに悩んだ方もいるのではないだろうか。

そこで今回はHTML初心者に向けて、

**・textareaタグとinputタグとの違い**
**・テキストエリアの作り方**
**・テキストエリアに設定できる属性**

を紹介する。

テキストエリアの使い方に悩んでいる人は、参考にしてほしい。

textareaタグとinputタグの違い
---------------------
&lt;textarea&gt;と&lt;input type="text"&gt;は、どちらもテキストを入力させたい場合に使う。

使い分けは簡単で、

タグ                        | 入力欄               | 使用例       
------------------------- | ----------------- | ----------
&lt;textarea&gt;          |&nbsp; 複数行のテキスト入力欄 | お問い合わせ内容など
&lt;input type="text"&gt; |&nbsp; 1行のテキスト入力欄  | 名前・住所など   

となる。

入力項目の内容によって使い分けよう。

テキストエリアの作り方
-----------
それでは実際にテキストエリアを作ってみる。

テキストエリアは他のフォームの部品と違い、inputタグを使わない。以下のように**textareaタグ**を使って記述する。

```html:html
<textarea name="otoiawase" rows="5" cols="40"></textarea>
```

[![](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_textarea1.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_textarea1.png)

このように表示される。inputタグと違い、最後に**&lt;/textarea&gt;という閉じタグが必要**になるので注意。

テキストエリアに設定できる属性
---------------
テキストエリアはお問い合わせフォームなどの部品の一つとして使う。

フォームの部品として機能させるために必要な属性や、テキストエリアの見た目を変えるために必要な属性がある。

テキストエリアを使いこなす上で必須な内容なので、一緒に覚えておこう。

### テキストエリアに名前を指定する【name】
例えばお問い合わせフォームのように、何かの情報を送信する必要がある場合、HTMLだけでは機能を実現できない。PHPなどの別のプログラムに情報を送り、処理をする必要がある。

inputタグと同様に、name属性を指定すると情報を送られたプログラムが**「このフォームの部品は何なのか」**と識別できるようになる。

```html:html
<textarea name="otoiawase" rows="5" cols="40"></textarea>
```

上の例だと、**textareaの中に入っている内容は「otoiawase」の中身なんだ**とプログラムに認識される。

### 行数・列数を指定する【rows・cols】
テキストエリアが狭いと、ユーザーは入力しづらく感じる。**rows・cols**の項目を指定してあげると、テキストエリアの大きさを自由に変更できる。

属性名  | 設定できる項目 | 見た目の変化        
---- | ------- | --------------
rows | 行数      | テキストエリアの高さが変わる
cols | 文字数     | テキストエリアの幅が変わる 

```html:html
<textarea name="otoiawase" rows="6" cols="40"></textarea>
```

入力できるのは数字のみで、%などの単位で指定することはできない。

ちなみに、rowsやcolsを使わずにCSSのwidthやheightで指定することもできる。

### 初期値を指定する
テキストエリアに初期値を入力しておきたい場合は、**&lt;textarea&gt;〜&lt;/textarea&gt;**の中に含める。

```html:html
<textarea name="otoiawase">ここに初期値を入れます</textarea>
```

[![](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_textarea2.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_textarea2.png)

初期値が不要な場合は&lt;textarea&gt;&lt;/textarea&gt;とすれば何も表示されない。

inputタグと違い、**value属性で初期値を設定することはできない**ので注意。

### 入力必須にする【required】
必ず入力させたい項目には**required**を指定する。

```html:html
<form>
<textarea name="otoiawase" required></textarea>
<button>送信</button>
</form>
```

[![](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_textarea3.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_textarea3.png)

入力せずに送信しようとするとエラーが表示される。

### 最大文字数・最小文字数を決める【maxlength・minlength】

**maxlength**属性を使うと、指定した文字数以上の入力は無効になる。

```html:html
<textarea name="otoiawase" maxlength="20"></textarea>
```

[![](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_textarea4.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_textarea4.png)

上記の例の場合、20文字以上の入力は全て無効になる。ただし、これだけだとユーザー側からはどうして途中から入力が無効になるかわからない。必ず入力フォームの近くに「◯文字以内で入力してください」と書いておくようにする。

同じように、**minlength**属性を使うと最小文字数が指定できる。

```html:html
<textarea name="otoiawase" minlength="5"></textarea>
```

[![](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_textarea5.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_textarea5.png)

上記の例だと、5文字未満で送信しようとするとエラーになる。ただし、空（0文字）だと送信できてしまうので、入力必須のrequiredと一緒に使うようにする。

### プレースホルダーを指定する【placeholder】
初期値としてではなく、そのテキストエリアが何の項目なのか表示したい時には**placeholder**を使う。

```html:html
<textarea name="otoiawase" placeholder="お問い合わせ内容"></textarea>
```

[![](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_textarea6.png)](https://webukatu.com/wordpress/wp-content/uploads/2020/06/html_textarea6.png)

このように、入力欄にうっすらとテキストが表示されるようになる。placeholderで指定した内容は、ユーザーが何かを入力すると表示されなくなる。

まとめ
---
以上、今回はHTML初心者の方に向けて

**・textareaタグとinputタグとの使い分け**
**・テキストエリアのタグの書き方**
**・テキストエリアに設定できる属性6つ**

を紹介した。

この記事の内容を覚えておけば、よりユーザーが使いやすいテキストエリアが作れるようになるだろう。ぜひマスターしてほしい。

---
#### かずきち
プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
[https://webukatu.com/](https://webukatu.com/?utm_source=blog&utm_medium=bl02&utm_campaign=blog_pr)