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

4.3 テキストボックス

テキストボックス

4.3 テキストボックス

【ここで学ぶ内容】

  • テキストボックス
  • <input type=”text” name=”名前”>

4.3 テキストボックス

テキストボックスは、1行のテキストを入力するフォームです。

図 4.3.1 テキストボックス

早速、テキストボックスを作っていきます。

1. 準備

まず、HTMLファイルを保存するためのフォルダを新しく作成します。1章で作成した[webpage]フォルダのなかに、[ch05]フォルダを作成してください。フォルダができたら、新しくテキストエディタを開いて、[form.html]という名前で、[ch05]フォルダに保存してください。文字コードは、これまでと同様に、UTF-8としましょう。

2. HTMLファイルにソースコードを記述

[form.html]に以下のソースコードを記述してください。

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

➢ 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>
            </form>
        </body>
        </html>
        

テキストボックスは、<input>タグのtype 属性に、「textを指定します。

また、記入内容を送信したときに、相手側のプログラムが、どの入力欄に記入されたデータなのかを判断できるようにname属性に名前を指定します。今回のテキストボックスは、「名前」の記入を行うものですので、name属性に「name」という名前を指定しました。ここは任意ですが、わかりやすい名前をつけておきましょう。ソースコードの記述が終わったら、上書き保存をして、ブラウザで表示しましょう。

3. ブラウザで確認

図 4.3.2

文字情報を入力することのできる、長方形のテキストボックスが表示されました。

NEXT>> 4.4 テキストエリア

HTMLとCSSの入門 目次

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

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

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

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

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

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

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

ホームページ制作・保守

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