東京・大阪・名古屋・福岡・仙台・札幌で開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

4.4 テキストエリア

テキストエリア

4.4 テキストエリア

【ここで学ぶ内容】

  • テキストエリア
  • <textarea name=”名前”></textarea>

4.4 テキストエリア

<textarea>タグは、複数行のテキスト入力を受け付けるフォームです。入力時に改行することもでき、長い文章を書いてもらうことも可能です。

図 4.4.1 テキストエリア

早速、テキストエリアを作っていきます。

1. ソースコードの記述

先ほど作成した[form.html]のソースコードを、以下のように修正してください。

①ソース・フォルダー :webpage/ch04
②ファイル名     :form.html

➢ form.html

        <p>メッセージ:</p>
        <textarea name="message" rows="5" cols="40"></textarea>
        

textareaタグはinputタグとは異なり、開始タグと終了タグのペアを使います。タグの間に記述された内容が初期値として使われます。データの名前を指定するname属性のほかに、入力エリアの行数、列数を示すrows属性とcols属性を指定することができます。

➢ form.html

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <title>フォームの作成</title>
        </head>
        <body>
            <form action="" method="POST">
                <p>名前:<input type="text" name="name"></p>
                <p>メッセージ:</p>
                <textarea name="message" rows="5" cols="40"></textarea>
            </form>
        </body>
        </html>
        

2. ブラウザで確認

ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示しましょう。

図 4.4.2

複数行のテキストエリアが表示されます。

NEXT>> 4.5 ラジオボタン・チェックボックス

HTMLとCSSの入門 目次

ご不明点はお問い合わせフォームからご連絡ください。

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.