HTML / CSS を使う

【第4回】HTML入門編(フォームで遊んでみよう)





WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ!

第4回では、フォームを使って遊んでみます。


フォームとは?


HTML で使う「フォーム」は、読者(ユーザ)と交流できる わくわくツール の一つです。

テキストボックスや、プルダウン、ボタンなど、読者(ユーザ)が能動的に操作する部品を提供します。


■ フォームのサンプル


フォームを使ったサンプルです。

カテゴリと検索キーワードをもとに、サイトの中を検索します。


ポイント


お好きなキーワード(例:"ホテル♡")を入れて検索ボタンを押してください。

(新しいウィンドウを表示します)


■ カテゴリ




さっそくフォームを使ってみよう


フォームにはいろいろな部品があります。代表的な部品を表示してみます。


■ テキストボックス(1行)


「文字を自由に入力する箱」をテキストボックスとか、テキストエリアと呼びます。


ポイント


テキストボックスの中の文字列を自由に書き換えることができます。

 


Step.1 <input> タグ(type="text" 属性)を使う


改行無しの1行の文章を自由に入力できる部品を表示する「HTMLタグ」は <input> です。属性に type="text" を指定します。


「カスタムHTMLブロック」に次のサンプルを記述します。

<form>

    <input type="text" name="name1" value="ホテル♡">

</form>


ポイント


フォームの部品を使う場合は、部品を並べた最初と最後を、<form> ~ </form> で括ります。

「<form> ~ </form> の中にあるものが一つのグループですよー」と、おまじないをかけています。「書くものなんだ!」と覚えてください。



Step.2 <input> タグの属性


<input> タグの(テキストボックス1行の場合の)主な属性です。


属性説明必須記載例
type部品のタイプ(種類)を指定します。
テキストボックス(1行)の場合は、"text" を指定します。
type="text"
name部品に名前を付けます。
部品に表示(入力)中の値を使う場合に名前が目印になるので、基本的には名前を付けておきましょう。
name="name1"
value部品を表示した場合に、最初に入力されている値を指定します。
value="ホテル♡"

Step.3 完成です


完成です。プレビューなどで実際の画面を見て確認してください。



■ チェックボックス


チェックボックスとは、項目にチェックを付けることができる部品です。


ポイント


あなたの好きな果物をチェックしてください。

 オレンジ  リンゴ  レモン


Step.1 <input> タグ(type="checkbox" 属性)を使う


チェックボックス部品を表示する「HTMLタグ」は <input> です。属性に type="checkbox" を指定します。


「カスタムHTMLブロック」に次のサンプルを記述します。

<form>

    <input type="checkbox" name="name2" value="orange" checked=""> オレンジ
    <input type="checkbox" name="name2" value="apple"> リンゴ
    <input type="checkbox" name="name2" value="lemon"> レモン

</form>


ポイント


チェックボックスを使う場合は、項目の数だけ同じ name 属性の <input> タグを並べます。

項目名は、value ではなく、<input> タグの次に書く文字列になります。

(value はチェック有無の判定をする場合に内部で用いる値です)


checked="" 属性を付けた場合、表示時に既にチェックした状態となります。



Step.2 完成です


完成です。プレビューなどで実際の画面を見て確認してください。


■ ラジオボタン


ラジオボタンとは、複数の項目から一つを選んでもらう部品です。


ポイント


あなたの心の色を選んでください。

 白
 赤
 青
 まっ黒


Step.1 <input> タグ(type="radio" 属性)を使う


チェックボックス部品を表示する「HTMLタグ」は <input> です。属性に type="radio" を指定します。


「カスタムHTMLブロック」に次のサンプルを記述します。

<form>

    <input type="radio" name="name3" value="white" checked=""> 白<br>
    <input type="radio" name="name3" value="red"> 赤<br>
    <input type="radio" name="name3" value="blue"> 青<br>
    <input type="radio" name="name3" value="black"> 真っ黒<br>

</form>


ポイント


ラジオボタンを使う場合は、項目の数だけ同じ name 属性の <input> タグを並べます。

項目名は、value ではなく、<input> タグの次に書く文字列になります。

(value はチェック有無の判定をする場合に内部で用いる値です)


checked="" 属性を付けた場合、表示時に既にチェックした状態となります。

(どれか一つに checked="" 属性を付けてください)



Step.2 完成です


完成です。プレビューなどで実際の画面を見て確認してください。


■ ボタン


何か足りない……、何か足りない……、何か足りない……

そうです、行動するための「ボタン」を紹介します。


ボタンとは、「ぽちっとな」と押せる部品です。


ポイント


ボタンを押すと Yahoo!のページにジャンプします。

(このページ上で移動するので、バックボタンで戻ってきてください)



Step.1 <input> タグ(type="submit" 属性)を使う


ボタン部品を表示する「HTMLタグ」は <input> です。属性に type="submit" を指定します。


「カスタムHTMLブロック」に次のサンプルを記述します。

<form action="https://www.yahoo.co.jp">

    <input type="submit" value="Yahoo!で検索">

</form>


ポイント


ボタンを押したときのページの移動先を <form> タグの <action> 属性で指定します。



Step.2 完成です


完成です。プレビューなどで実際の画面を見て確認してください。


フォームを組み合わせて使ってみる


■ Yahoo!の検索ボックスの作り方


フォームを組み合わせて使ってみましょう、

検索キーワードを入力し、Yahoo!で検索します。


ポイント


ボタンを押すと Yahoo!のページを新しいウィンドウで表示します。

検索ボックス(テキストボックス)に検索したい言葉を入れて、「検索する」ボタンを押してください。





Step.1 検索ボックス(テキストボックス)と 検索ボタンを設置する


検索ボックスは、<input type="text" > を、検索するボタンは <input type="submit"> を利用します。


「カスタムHTMLブロック」に次のサンプルを記述します。

<form method="get" action="https://search.yahoo.co.jp/search" target="_blank">

    <input type="text" name="p" size="28" value="世界で最も美しい顔">
    <br>
    <input type="submit" value=" 検索する ">

</form>


ポイント


  • Yahooa!で検索する場合は、<form> タグに method="get" 属性を付けます
  • 新しいウィンドウで表示する場合は、<form> タグに tareget="_blank" 属性を付けます
  • Yahooa!で検索する場合は、検索ボックスの名前を name="p" 属性で指定します


Step.2 <form> タグの method="get" 属性とは


<form> タグの method="get" 属性とは、action で指定した移動先(今回は "https://www.yahoo.co.jp")に、部品(検索ボックス)で指定した値を渡す方法です。


method="get" 属性を指定すると、URL の後ろに、「部品の名前=値」をくっつけて、移動先のURLを呼び出してくれます。


ポイント


https://search.yahoo.co.jp/search?p=世界で最も美しい顔


「?p=世界で最も美しい顔」が URL の後ろに付与されて、Yahoo!のページを呼び出すことで検索した状態で新しいページを表示します。



Step.3 完成です


完成です。プレビューなどで実際の画面を見て確認してください。


まとめ


HTML を使ってフォーム(テキストボックスや、ラジオボタン)を使う場合は、<form> タグと、<input> タグを利用して簡単に表現することができます。

Yahoo!などで検索する「検索ボックス」などを実装することが可能です。


読者(ユーザ)がいろいろ触れる(アクションする)記事を作ると、楽しさが一層アップしますね。



■ 次の記事に進む

【第5回】HTML入門編(style 属性を付けて背景色を変えてみる)

WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ!第5回では、フォーム(テキストボックス)の背景色や形を style 属性を使って変えてみます。

続きを見る


■ 最初から読む

【第1回】HTML入門編(WordPress で HTML を使ってみよう!)

WordPress を使って記事を書いていく中で、よく聞く「HTML で記述する」ということについて漠然と理解している方もいると思います。「HTML を使うことでできること」、そして、「そもそも HTML とは何か?」から紹介し、HTML を使いこなしてさらに表現豊かな記事を書けるようになる「知識と方法」を、連載記事で初心者にもわかりやすく丁寧に紹介させていただきます。

続きを見る








Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ