感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

学んだことまとめ。

<スポンサーリンク>

今日のHTMLの勉強もトレーニングブックを使わせていただいた。
もうすぐ1周し終わるので、適宜復習しつつ、次の勉強に進みたい。

HTML&スタイルシート トレーニングブック CSS3増補版

HTML&スタイルシート トレーニングブック CSS3増補版

職場の人に勧められて買ったのだが、HTMLの学習のはじめの一歩にふさわしい良書だった。

★★
■フォームを作成する

<form> フォームを作成 </form>

・属性
method:送信方法を指定
action:データを処理するURLを指定
enctype:送信の際のデータ形式を指定する
accept-charset:入力された文字コードを指定
accept:サーバプログラムが処理可能なMIMEタイプを指定する

■フォームの部品を挿入する
・type属性に指定するもの
text
password
checkbox
radio
submit
reset
button
image
file
hidden

他の属性
・name
・size
・maxlength
・value

■複数行のテキスト入力欄を作成する

<textarea> テキスト入力欄 </textarea>

・属性
rows
cols
wrap:soft→自動改行されるが送信時には改行されない
hard→横幅を超えたところで開業する
off→自動改行しない
name

・MIMEタイプとは
インターネット上でマルチメディアを利用するためのデータ形式のこと。
基本的にはデータのエンコーディング方式の定義ルール。

■チェックボックス

<!-- checkbox -->
<input type="checkbox" name="hoge" value="fuga"/>
<input type="checkbox" name="foo" value="ugi"/>

<!-- radio -->
<input type="radio" name="hoge" value="fuga"/>

サンプル

<!DOCTYPE html PUBLIC ="//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31J" />
<title> TEST </title>
</head>
<body>
<form method="post" action="./6_1.html"
enctype="text/plain">
■名前<br />
<input type="text" name="name1" size="30" /></br>
<p>
■メッセージ</br>
<textarea rows="6" cols="40"
wrap="soft"></textarea><br />
</p></br>
■パスワード
<input type="password" name="password" size="20"
maxlength="8" value="******" /> </br>
<span id="small">※暗証番号は英数半角8文字で
</span></br>

<p>
北海道でスープカレーといえば?</br>
<input type="checkbox" name="soupcurry" value="pika" />ピカンティ
<input type="checkbox" name="soupcurry" value="lavi" />ラビラビ
<input type="checkbox" name="soupcurry" value="voi" />ヴォイジュ
<input type="checkbox" name="soupcurry" value="maji" />マジックスパイス
</br>
■チキン?角煮?<br>
<input type="radio" name="gu" value="chikin" />チキン
<input type="radio" name="gu" value="kakuni" />角煮
</br>


<input type="submit" value="メッセージを送信" />
<input type="reset" value="リセット" />

</form>

</body>
</html>