HTML で 文字 を 入力する 欄 を表示する ～HTML input text-area～

目的

• HTMLの画面に文字を入力する欄の表示を行う方法をまとめる

押さえるポイント

• 一行の入力欄を表示させる時はinputタグ使用する
• 複数行の入力欄を表示させる時はtext-areaタグを使用する
• お問い合わせフォームの作成などで送信ボタンを設置するときはinputタグでtype属性にてsubmitを指定する。
  送信ボタンは何も設定しないとボタン部分に「送信」と表示される。任意の文字を表示させたい時はvalue属性にて表示させたい文言を与える

書き方の例

• 下記にHTMLファイルの内容を記載する。

<!-- 一行の入力欄を表示する -->
<input>

<!-- 複数行の入力欄を表示する -->
<text-area></text-area>

<!-- 送信ボタンを表示する -->
<input type="submit">

より具体的な例

• 企業webサイトによくある問い合わせ用フォームを作成する。

• 返信用メールアドレスを記入する欄を作成する。

• 問い合わせ主の名前を入力する欄を作成する。

• 問い合わせ内容を入力する欄を作成する。

• 送信ボタンを作成する。
  ※返信用メールアドレスと問い合わせ主の名前の入力欄は一行の入力欄とする。
  ※問い合わせ内容の入力欄は複数行の入力が可能な入力欄とする。
  ※各入力欄の上に入力欄の概要を記載する

• 下記にHTMLファイルの内容を記載する。

<p>返信用メールアドレス(必須)</p>
<input　class="mail">

<p>お名前(必須)</p>
<input class="name">

<p>お問い合わせ内容</P>
<text-area></text-area>

<input type="submit">