初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

HTML Formの基本構造

フォームの基本枠組み

コントロール:データを入力するための手段

form要素:

  • action属性:データを受け取るプログラムを指定。「どこに」
  • method属性:データの送信方法を指定。「どうやって」

input要素:type属性を様々に変える事が出来る。

  • textタイプのinput要素
    • name属性:複数のデータを受信した際のデータの名前を指定
    • value属性:初期値を指定
    • size属性:フィールドの長さ(文字数)を指定

    例1
    氏名:<input type="text" name="氏名" placeholder="氏名">
                    ↓
    氏名:

    例2
    URL:<input type="text" name="url" value="http://" size="60">
                    ↓
    URL:
  • submitタイプのinput要素
    <input type="submit" value="送信">
                    ↓
  • radioタイプのinput要素
    性別:
    <input type="radio" name="性別" value="男"> 男 
    <input type="radio" name="性別" value="女"> 女
                    ↓
    性別: 男 
  • checkboxタイプのinput要素
    所持品:
    <input type="checkbox" name="prop" value="Guitar">ギター 
    <input type="checkbox" name="prop" value="Bass"> ベース
    <input type="checkbox" name="prop" value="Drum" checked>ドラム
                    ↓
    所持品: ギター  ベース   ドラム

 

select要素: 「メニュー」というタイプの選択肢を提供するため使用.メニューの選択肢はoption要素を列挙することで提供します

<select name="好きなアーティスト">
<option>The Beatles</option>
<option>The Rolling Stones</option>
<option>Pink Floyd</option>
<option>Yes</option>
</select>

                ↓

好きなアーティスト:

長い文章の入力:

複数行にわたる文章の入力のために使用。textarea要素はinput要素とは異なり、開始タグと終了タグのペアを使います.

<textarea cols="40" rows="4" placeholder="問い合わせ内容">

                ↓

問い合わせ内容

 

脚注

  • value:値, 価値, バリュー, 価格,
  • submit:提出する, 屈服する, 屈伏する, 負ける
  • required:必要な, 必要とされる; 《学科が》 必修の;

参考サイトです。

基本的なフォーム -- ごく簡単なHTMLの説明

topへ戻る