HTMLの基礎〜テーブルとフォーム~HTML入門~HTML TUTORIAL~

スポンサーリンク

本当にわからないとこがあった場合一人では解決できません。
『teratail』とはエンジニア特化型のQ＆Aサイトです。 すべてのエンジニアさんが抱えている悩みを共有して 解決するための質問サイトです
無料なのでまずは登録して使ってみてください。メールアドレスだけで登録可能です ----------------------------------------------------------------------------------------

テーブル

では今回で初級編HTMLは最終回になります。これを見た後はCSS初級編に移動してください！それなりのページが作れると思います！ではテーブルに移りましょう！

HTMLにおける表はtable要素を使って表現します。表の中には1つ以上の「行」があり、その行の中にはまた1つ以上の「セル」があるという考え方でテーブルを表現します。「行」をtr要素（Table Row）、「セル」をtd要素（Table Data）という要素で表すことができます。

<table>
    <tr>
        <td>：Row 1, cell 1</td>
        <td>：Row 1, cell 2</td>
        <td>：Row 1, cell 3</td>
    </tr>
    <tr>
        <td>：Row 2, cell 1</td>
        <td>：Row 2, cell 2</td>
        <td>：Row 2, cell 3</td>
    </tr>
    <tr>
        <td>：Row 3, cell 1</td>
        <td>：Row 3, cell 2</td>
        <td>：Row 3, cell 3</td>
    </tr>
    <tr>
        <td>：Row 4, cell 1</td>
        <td>：Row 4, cell 2</td>
        <td>：Row 4, cell 3</td>
    </tr>
</table>

 

ではこれをメモ帳から貼り付けでhtmlでみてください。

 

こんな感じになったと思います。

table要素は、テーブルを定義します。つまりは全体の枠組

tr要素は、テーブル定義行。

td要素は、定義されたデータセル。tr上記のように、これらはタグで囲む必要があります。

ROW1、２、３、４で上から並んでますね。それに続いてCELL1,2,3で順番に並んでますね。これが表の作り方になります

 

フォーム

では次はフォームのお話です。よくメールでお問い合わせフォームとかありますよね？それをつくります。ちょっと難しいですけどついてきてください

こんな感じのをつくります。フォームの実際のHTMLで使用される基本的なタグがありform、input、textarea、selectとoptionを使って作成します

form

formフォームを定義します。このタグ内で、ユーザーが情報を送信するためのフォームを。
actionを使用している場合は、フォームの内容をどこに送信するかを指定する属性が必要です。
method属性は、フォーム内のデータがどのように送られるかをフォームに伝える役割があります

<form action="processing.php" method="post">

</form>

このPHPってやつはのちにお話します。PHPってやつでメールサーバーとかを起動させるわけです。

インプット

inputタグは、フォームの世界の大魔王です。それには多くのものがありますが、その中で最も一般的なものは次のとおりです

<input type=”text” />または単に<input type=”text” />標準のテキストボックスです。これにはvalue、テキストボックスに最初のテキストを設定する属性を含めることもできます。

<input type=”password” /> テキストボックスに似ていますが、ユーザーが入力した文字は表示されません。

<input type=”checkbox” />はチェックボックスで、ユーザーがオンとオフを切り替えることができます。これはchecked属性を持つこともできます（属性には値は必要ありません）。そして、チェックボックスの初期状態をそのままオンにします。<input checked=”checked” type=”checkbox” />

<input type=”radio” />チェックボックスに似ていますが、ユーザーはグループ内のラジオボタンを1つだけ選択できます。これはchecked属性を持つこともできます。

<input type=”submit” />選択すると、フォームが送信されます。valueたとえば、属性を含む送信ボタンに表示されるテキストを制御することができます<input type=”submit” value=”Ooo. Look. Text on a button. Wow” />。

これを実際の形にするとこんな感じ

または単に標準のテキストボックスです。これにはvalue、テキストボックスに最初のテキストを設定する属性を含めることもできます。

テキストボックスに似ていますが、ユーザーが入力した文字は表示されません。

はチェックボックスで、ユーザーがオンとオフを切り替えることができます。これはchecked属性を持つこともできます（属性には値は必要ありません）。そして、チェックボックスの初期状態をそのままオンにします。

チェックボックスに似ていますが、ユーザーはグループ内のラジオボタンを1つだけ選択できます。これはchecked属性を持つこともできます。

選択すると、フォームが送信されます。valueたとえば、属性を含む送信ボタンに表示されるテキストを制御することができます。

上記のボタンを押してみてください。反応しますんで。

 

テキストエリア

textarea基本的には、大きな複数行のテキストボックスです。予想される行数と列数は、rowsとcols属性で定義できます。

<textarea cols=”20″ rows=”4″>A big load of text</textarea>

こんなのが出てくる

セレクト

selectタグはで動作するoptionドロップダウン選択ボックスを作るためのタグ。

<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option value="third option">Option 3</option>
</select>

こんなのが作れる。

習うより慣れろがほんと近道ですので、とりあえず予備知識がなくてもホームページを作ってみることが非常に重要です。がんばりましょう！！

前のページHTMLの基礎〜テーブルとフォーム

このページが初級編最後です！お疲れ様でした！

 

スポンサーリンク

プログラミングは独学からは挫折の可能性が高いです。まずは無料体験ができる
コードキャンプが本当におすすめ。無料体験でわからないところを聞きましょう。
転職補助つき。カリキュラム終了後に転職紹介をしてくれます。