読者です 読者をやめる 読者になる 読者になる

HTMLの勉強|Webサイト作りの基礎

初心者向けの向けのHTMLの勉強の仕方を綴っていきます。かくいう私もWebサイト作りの初心者です笑

HTMLのフォームについての勉強

HTMLのフォームについての勉強をしましょう。

さて、今回はHTMLのフォームについて勉強していきましょう。

以前にも勉強したことはありましたが、丁寧な説明とは言えませんでしたので笑

今回は、自分のHTMLの勉強のためにも、少し丁寧にお伝えできればと思います。

それでは、HTMLのフォームについて勉強していきましょう。

 

フォームの要素

<formaction="CGIまたはPHP" methad="postまたはget">
</form>

action属性…データを受け取るプログラム
      (現在は、CGIよりPHPを使います)
method属性…データの送信方法
      (お客様の情報を得る時は「post」を使います)

inputの要素

・フォームを構成する様々な入力部品を作成する
・終了タグはありません
・<p>で囲んでブロックレベルにする

<inputtype="値"name="名前" valru="文字列">

・type属性…フォーム部品の種類を指定
      ・text
      ・radio
      ・checkbox
      ・submit
      ・password
      ・reset
      ・button
      ・image
      ・file
      ・hidden
・name属性…データベースに格納するためのセルの名前
・value属性…配列(文字列)を指定して値を取得する

type属性

text

・1行テキスト領域

<inputtype="text"name="name"size="20"maxlength="10"value="お名前">

・1行テキストボックス
・2行以上にわたる長い文章を入力させたい場合には、<texrea>~</texrea>を使用する

radio

ラジオボタン

<inputtype="radio"name="sex"value="male"checked>男性
<inputtype="radio"name="sex"value="female">女性

・複数の選択肢の中から一つしか選択できない
・複数を一つのグループとして認識させるには、name属性で同じ名前を付ける
・checked属性…その項目はあらかじめチェックの付いた状態になる

checkbox

チェックボックス

<inputtype="checkbox"name="mobile"value="1"checked>iphone
<inputtype="checkbox"name="mobile"value="2">Android
<inputtype="checkbox"name="mobile"value="3">その他

・複数選択が可能
・checked属性…その項目はあらかじめチェックの付いた状態になる

submit

・送信ボタン

<inputtype="submit"value="送信">

・ボタンで入力情報を送信するものは全て「submit」
・value…送信ボタンの名前

password

・パスワード用領域

<inputtype="password"value="password">

 

reset

・リセットボタン

<inputtype="reset"value="リセット">

・value…リセットボタンの名前

button

・汎用ボタン

<inputtype="button"value="ボタン">

・value…汎用ボタンの名前

image

・画像を使用した送信ボタン

<inputtype="image"src="img/img01.jpg"name="button"alt="送信する"align="middle">

src…ボタンに使用する画像のURL
alt…画像の代わりになるテキスト
align…画像に並ぶテキストの位置
    (top、middle、bottom、left、right)
    ※このalign属性は、HTML 4.01では非推奨です