- WEBデザイン＆WEBプログラミング -sei2の日記- - http://blog1.dd-company.com -

基金訓練に行ってきました。(52日目その2)

Posted By sei2 On In 職業訓練 | No Comments


基金訓練(Webデザイン・プログラミング科)の52日目に行ってまいりました。
その1の続きです。
52日目は、HTML＆CSSプログラミングの実習です。

本日の内容は下記のとおりです。

１．フォーム

アンケートフォームのように入力欄や選択メニューを設け、ユーザーが入力･選択した情報を受け取るためのもの。

入力フィールド(１行)

お名前：

↑こんな感じです。↑

CSSの例は下記のとおりです。
input.text {
border: solid 1px green;
margin-left: 5px;
}
HTMLの例は、下記のとおりです。
<form action=”xxx.cgi” method=”post”>
お名前：

<input class=”text” type=”text” name=”フィールド名” size=”20″
maxlength=”30″ value=”これはvalueの属性値” />
</form>
  • ※name属性の属性値には、フィールド名を指定する。
  • ※size属性の属性値には、入力欄の長さを文字数で指定する。
  • ※maxlength属性の属性値には、入力可能な最大文字数を指定する。
  • ※value属性の属性値には、入力欄にデフォルトで表示させるテキストを指定する。
  • ※ボックスのボーダ－の太さや色、フォントサイズ等は、CSSで設定する。

入力フィールド(複数行)

コメント：

↑こんな感じです。↑

CSSの例は下記のとおりです。
input {
border: solid 1px green;
}
HTMLの例は、下記のとおりです。
<form action=”xxx.cgi” method=”post”>
コメント：<br />
<textarea” name=”フィールド名” cols=”30″ rows=”5″>
デフォルトで表示する文字
</textarea>
</form>
  • ※name属性の属性値には、フィールド名を指定する。
  • ※cols属性の属性値には、入力欄の幅を文字数で指定する。
  • ※rows属性の属性値には、入力欄の行数(高さ)を文字数で指定する。
  • ※<textarea>～</textarea>の間には、入力欄にデフォルトで表示させるテキストを指定する。
  • ※ボックスのボーダ－の太さや色、フォントサイズ等は、CSSで設定する。

チェックボックス(複数選択可)

好きな季節は?
春
夏
秋
冬

↑こんな感じです。↑

CSSの例は下記のとおりです。
input.checkbox {
margin-left: 5px;
margin-right: 3px;
}
HTMLの例は、下記のとおりです。
<form action=”xxx.cgi” method=”post”>
好きな季節は?

<input class=”checkbox” type=”checkbox” name=”フィールド名” value=”春” />春
<input class=”checkbox” type=”checkbox” name=”フィールド名” value=”夏” checked=”checked” />夏
<input class=”checkbox” type=”checkbox” name=”フィールド名” value=”秋” />秋
<input class=”checkbox” type=”checkbox” name=”フィールド名” value=”冬” />冬
</form>
  • ※name属性の属性値には、フィールド名を指定する。
  • ※value属性の属性値には、チェック時送信されるテキストを指定する。
  • ※checked=”checked”は、あらかじめチェックされた状態で表示する時、記述する。

ラジオボタン(単数選択のみ)

生まれたのは?
大正
昭和
平成

↑こんな感じです。↑

CSSの例は下記のとおりです。
input.radio {
margin-left: 5px;
margin-right: 3px;
}
HTMLの例は、下記のとおりです。
<form action=”xxx.cgi” method=”post”>
生まれたのは?

<input class=”radio” type=”checkbox” name=”フィールド名” value=”大正” />大正
<input class=”radio” type=”checkbox” name=”フィールド名” value=”昭和” checked=”checked” />昭和
<input class=”radio” type=”checkbox” name=”フィールド名” value=”平成” />平成
</form>
  • ※name属性の属性値には、フィールド名を指定する。
  • ※value属性の属性値には、チェック時送信されるテキストを指定する。
  • ※checked=”checked”は、あらかじめチェックされた状態で表示する時、記述する。

回答選択メニュー(プルダウンメニュー)

性別：

↑こんな感じです。↑

CSSの例は下記のとおりです。
select.pulldown {
border: solid 1px green;
font-size: 1.5em;
color: blue;
}
HTMLの例は、下記のとおりです。
<form action=”xxx.cgi” method=”post”>
性別：

<select class=”pulldown” name=”フィールド名”>
<option value=”男”>男</option>
<option value=”女”>女</option>
</select>
</form>
  • ※name属性の属性値には、フィールド名を指定する。
  • ※value属性の属性値には、選択時送信されるテキストを指定する。
  • ※ボックスの大きさやボーダ－の太さや色、フォントサイズ等は、CSSで設定する。

回答選択メニュー(フィールド表示メニュー)

洗うのはどこから？：

↑こんな感じです。↑

CSSの例は下記のとおりです。
select.field {
border: solid 1px green;
font-size: 1.5em;
color: blue;
}
HTMLの例は、下記のとおりです。
<form action=”xxx.cgi” method=”post”>
性別：

<select class=”field” name=”フィールド名” size=”4″>
<option value=”頭”>頭から</option>
<option value=”首”>首から</option>
<option value=”上腕二頭筋”>上腕二頭筋から</option>
<option value=”足”>足から</option>
<option value=”その他”>その他</option>
</select>
</form>
  • ※name属性の属性値には、フィールド名を指定する。
  • ※value属性の属性値には、選択時送信されるテキストを指定する。
  • ※size属性の属性値には、フィールドの高さを行数で指定する。
  • ※size属性の属性値が選択肢の数より少ない時は、スクロールバーがつく。
  • ※ボックスの大きさやボーダ－の太さや色、フォントサイズ等は、CSSで設定する。

送信ボタン

↑こんな感じです。↑

CSSの例は下記のとおりです。
input.submit {
border: solid 2px green;
width: 130px;
height: 30px;
background-color: yellow;
font-size: 16px;
font-weight: bold;
color: blue;
}
HTMLの例は、下記のとおりです。
<form action=”xxx.cgi” method=”post”>

<input class=”submit” type=”submit” value=”送信” />
</form>
  • ※value属性の属性値には、ボタンに表示する文字を指定する。
  • ※ボタンの大きさや色、ボーダ－の太さや色、フォントサイズ等は、CSSで設定する。

リセットボタン

↑こんな感じです。↑

CSSの例は下記のとおりです。
input.reset {
border: solid 2px red;
width: 130px;
height: 30px;
background-color: green;
font-size: 16px;
font-weight: bold;
color: red;
}
HTMLの例は、下記のとおりです。
<form action=”xxx.cgi” method=”post”>

<input class=”reset” type=”reset” value=”リセット” />
</form>
  • ※value属性の属性値には、ボタンに表示する文字を指定する。
  • ※ボタンの大きさや色、ボーダ－の太さや色、フォントサイズ等は、CSSで設定する。

備考

このページの例は、フォームデコードのプラグラムの設置をしていないので、フォームを送信することはできません。
実際にメールフォームを設置しようと思っている方は、「メールフォーム　CGI」でググっていただくといいと思います。
また、CGIが使用できない環境の方は、「フォームデコードサービス」でググっていただくと、何か見つかると思います。



実習で使用している教本