<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>フォームタグ</title>
<style>
form{
width:30em;
line-height:2.5em;
}
input{
font-size:1.1em;
line-height:1.4em;
margin-left:1em;
}
</style>
</head>
<body>
<h1>フォームタグ</h1>
<article>
<form action="" method="">
<fieldset>
<legend>お客様情報</legend>
<ul>
<li><label for="id">会員番号</label><input type="text" id="id" size="15" placeholder="例) C000000"></li>
<li><label for="password">パスワード</label><input id="password" name="password" size="10"></li>
<li><label for="email">メールアドレス</label><input type="email" id="email" name="email" placeholder="例) ieyasu@bakufu.go.jp"></li>
<li><label for="tel">電話番号</label><input type="tel" id="tel" name="tel" placeholder="例) 000-000-0000"></li>
<li><label for="url">ホームページ</label><input type="url" id="url" name="url" size="25" placeholder="例) http://www.bakufu.go.jp"></li>
<li><label for="male">男</label>
<input type="radio" name="sex" value="female" id="female" checked><label for="female">女</label></li>
<li><label for="secret">画面では見えずに送信される情報</label><input type="hidden" id="secret" name="secret" value="秘密"></li>
</ul>
</fieldset>
<fieldset>
<legend>ご希望商品</legend>
<ul>
<li>
<input type="checkbox" name="goods" value="aaa0001" id="aaa0001"><label for="aaa0001">鋭い矛(aaa0001)</label>
</li>
<li><label for="color">色</label>
<select name="color" id="color" size="1">
<option value="">選べ</option>
</select></li>
<li><label for="number">個数</label><input type="number" name="number" min="1" max="10"></li>
<li><label for="date">配送希望日</label><input type="date" name="date"></li>
<li><label for="time">配送希望時間</label><input type="time" name="time"></li>
</ul>
</fieldset>
<fieldset>
<legend>連絡欄</legend>
<textarea id="comment" name="comment" cols="40" rows="5" placeholder="自由に書いてや">
</textarea>
</fieldset>
<button type="submit" name="action" value="send">送信</button>
</form>
</article>
</body>
</html>