webプログラミング講座 13日目

今日は、form(フォーム)について

フォームとは、注文画面や問い合わせ画面などでよく目にするページのことです。

form

 

 

HTMLファイル

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title></title>
<meta name=”author” content=”">
<meta name=”description” content=”">
<meta name=”keywords” content=”">
<link rel=”stylesheet” href=”02_markup.css”>
<style></style>
</head>
<body>
<form>
<dl>
<dt>会社名</dt>
<dd>
<input type=”text” name=”company” id=”company”>
</dd>
<dt>ご担当者名</dt>
<dd>
<input type=”text” name=”name” id=”name”>
</dd>
<dt>メールアドレス</dt>
<dd>
<input type=”text” name=”mail” id=”mail”>
</dd>
<dt>ホームページアドレス</dt>
<dd>
<input type=”text” name=”homepage” id=”homepage”>
</dd>
<dt>住所</dt>
<dd>
〒<input type=”text” name=”zip” id=”zip”><br>
<input type=”text” name=”address” id=”address”>
</dd>
<dt>電話番号</dt>
<dd>
<input type=”text” name=”tel1″ id=”tel1″>-
<input type=”text” name=”tel2″ id=”tel2″>-
<input type=”text” name=”tel3″ id=”tel3″>
</dd>
</dl>
<p>
<input type=”submit” name=”submit” value=”送信” id=”">
</p>
</form>
</body>
</html>

 

 

CSSファイル

@charset”utf-8″;

dl,dt,dd{
margin: 0;
padding:0;
}
dl {
background-color: #333;
border: 1px solid #999;
border-top: none;
width: 650px;
}
dt {
color: #ccc;
width: 12em;
padding: 0.5em 0 0.5em 1em;
border-top: 1px solid #999;
float: left;
}
dd {
background-color: #FFF;
margin: 0 0 0 12em;
padding: 0.5em 1em 0.5em 1em;
border-top: 1px solid #999;
border-left: 1px solid #999;
}

 

今日のべ弁当

001