Now is better than never

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

無糖の日々

時間が経てば甘くなる, The just desserts is also desserts.

③文章編-3

HTML

文章編-3 アンケート調査

 

今回の目標

Ⅰ入力フォーム生成

Ⅱ各種ボタン

Ⅲ入力フィールド作り

 

Ⅰ今回作る入力ファームは以下の通りです。

 

f:id:Detsch:20160807155335p:plain

Ⅰ導出(#で書いてある部分はタグの説明です)

<form action="cgi-bin/formsample.cgi"method="post"> #formは入力ファーム指定、actionはデータ処理するCGI等のプログラムのURL指定
<p>   #pは一つの段落を示す
お問い合わせはこちらからどうぞ
</p>
<p>
<textarea name="opinion"rows="7"cols="50"></textarea> #textarea<入力フィールド作成タグ、左記は7列,50行の意味
</p>
<p>
会員番号:<input type="text"name="number"value="A-"><br>
お名前:<input type="text"name="yourname">
</p>
<p>
<input type="submit"value="送信"> #inputはこのほかにラジオボタンラジオボタンを作るときにも用いられる入力ファームでは必須
<input type="reset"value="取消">
</p>

/form>

 

Ⅱ各種ボタン(凡用、ラジオ、チェックボックス)

 例

f:id:Detsch:20160807164908p:plain

ヒントボタンを押すと↓

f:id:Detsch:20160807165241p:plain

と出ます。

 

Ⅱ導出

<body>
<form action="cgi-bin/formsample.cgi"method="post">
<p>
<input type="button"value="戻る"onclick="history.back()">
<input type="button"value="進む"onclick="history.forward()">

<br>
<p>
<button type="button"onClick="alert('茨城県の名産品')">ヒント
</button>

</p>

<p>目的地への交通手段はどれですか?(ひとつだけ)</p>
<input type="radio" name="reason"value="plane">飛行機
<input type="radio" name="reason"value="train">列車
<input type="radio" name="reason"value="bus">高速バス
<input type="radio" name="reason"value="bike">バイ
<input type="radio" name="reason"value="walk">徒歩
<input type="radio" name="reason"value="other">その他

<p><交通手段で気にする部分は何ですか?(複数可)</p>

<p>
<input type="checkbox"name="reason"value="time">時間
<input type="checkbox"name="reason"value="money">費用
<input type="checkbox"name="reason"value="Sightseeing">観光
</p>


</form>
</body>

 

Ⅲ入力フィールドはこんな感じです↓

 

f:id:Detsch:20160807165738p:plain

Ⅲ導出

<body>
<form action="cgi-bin/formsample.cgi"method="post">

<p>受付番号<input type="text"name="number"></p>  #送信時、nameの定義名と受付番号が送信される
<p>パスワード<input type="password"name="pw"size="10"></p>  #文字数10の意

<./form>                          #passwordにすることで直接表示されなくなります。

</body>

<