WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

フォーム

f:id:mmmmofu:20150529154107p:plain

http://efu.sakura.ne.jp/web/0601/

名前→テキスト(1行テキスト)

<input type="text" maxlength="10" placeholder="お名前" required autofocus>

maxlengthはユーザーが入力できる最大文字数を指定する
placeholderはテキストボックス等にあらかじめ入力サンプル文字を表示させることができる
requiredは必須項目
autofocuはページを開いた時に自動的にフォーカスされた状態になる

性別→ラジオボタン(ひとつのみ選択)

<input type="radio">

年齢→リスト(リストの中から選ぶ)

<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

valueは送信される文字列を指定。

使用スマートフォンチェックボックス(いくつか選べる)

<input type="checkbox" name="phone" id="phone" value="1" checked>iPhone

checkedは最初から選択された状態

内容→テキストエリア(文章)

<textarea></textarea>

パスワード→パスワード形式の入力欄を作成

<input type="password">

写真→ファイルを選択

<input type="file">
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フォーム</title>
<style>
html, body, tr, th, td, h1 {
margin: 0;
padding: 0;
line-height: 1.0;
font-family: 
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
form{
margin: 0 auto;
}
table {
border-collapse: collapse;
border: 1px solid #333;
}
th {
border: 1px solid #333;
background: lightsteelblue;
padding: 10px;
}
td {
border:1px solid #333;
padding: 10px;
}
span {
font-size: 10px;
color: red;
vertical-align: top;
margin-left: 5px;
}
</style>
</head>
<body>
<h1>お問い合わせフォーム</h1>

<form action="#" method="post">
<table>
<tr>
<p><th>名前</th><td><input type="text" name="name" size="20" maxlength="10" placeholder="お名前" required autofocus><span>※必須項目</span></td></p>
</tr>
<tr>
<th>性別</th><td><label for="male"><input type="radio" name="性別" id="male" value="male">男性</label>
<label for="female"><input type="radio" name="性別" id="female" value="female" checked>女性</label></td>
</tr>
<tr>
<th>年齢</th>
<td>
<select name="age">
<option value="">以下から選択</option>
<option value="1">10代</option>
<option value="2">20代</option>
<option value="3">30代</option>
<option value="4">40代</option>
<option value="5">50代</option>
</select>

</td>
</tr>
<tr>
<th>使用スマートフォン</th><td><label for="phone"><input type="checkbox" name="phone" id="phone" value="1" checked>iPhone</label>
<label for="Android"><input type="checkbox" name="Android" id="Android" value="2">Android</label>
<label for="ather"><input type="checkbox" name="ather" id="ather" value="3">その他</label></td>
</tr>
<tr>
<p><th>内容</th><td><textarea name="subject" rows="5" cols="40" placeholder="お問い合わせ内容" required></textarea><span>※必須項目</span></td></p>
</tr>
<tr>
<th><form action="#" method="post">
<p>パスワード</th><td><input type="password" name="password" size="5" maxlength="4"></td></p>

</form>
</tr>
<tr>
<th><form action="#" method="post" enctype="multipart/form-data">写真
</th><td><input type="file" name="picture"></td>
</tr>
</table>
<p><input type="submit" value="送信"></p>
</form>

</body>
</html>

 

練習

f:id:mmmmofu:20160802104712p:plain

http://efu.sakura.ne.jp/web/0601/index2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フォーム</title>
</head>
<body>
<h3 class="hdg">インターネットでのお問い合わせ</h3>
<p>インターネットでのお問い合わせをご希望の方は下記フォームよりご連絡ください。</p>
<form action="#" method="post" id="inquiry">
<p class="attention"><strong>※全て必須項目です。</strong></p>
<table class="table">
<tr>
<th>お名前</th>
<td>
<label for="last_name"></label>
<input type="text" name="last_name" id="last_name" placeholder="山田" autfocus required>
<label for="first_name"></label>
<input type="text" name="first_name" id="first_name" cplaceholder="太郎" required>
</td>
</tr>
<tr>
<th>ふりがな</th>
<td>
<label for="last_kana">せい</label>
<input type="text" name="last_kana" id="last_kana" placeholder="やまだ" required>
<label for="first_kana">めい</label>
<input type="text" name="first_kana" id="first_kana" cplaceholder="たろう" required>
</td>
</tr>
<tr>
<th>メールアドレス</th>
<td><input type="email" name="mail" id="mail" size="30" placeholder="yamada@example.co.jp" required>
<span>(半角)</span></td>
</tr>
<tr>
<th>お電話番号</th>
<td><input type="tel" name="tel" id="tel" size="30" placeholder="03-1234-5678" required>
<span>(半角)</span></td>
</tr>
<tr>
<th>ご職業</th>
<td>
<select name="job" id="job" required>
<option value="" selected="selected">選択して下さい</option>
<option value="会社員">会社員</option>
<option value="自営・フリーランス">自営・フリーランス</option>
<option value="役員・経営者">役員・経営者</option>
<option value="学生">学生</option>
<option value="主婦">主婦</option>
<option value="その他">その他</option>
</select>
</td>
</tr>
<tr>
<th>お問い合わせの種類</th>
<td><input type="radio" name="type" id="type1" value="コーディング代行について" required>
<label for="type1">コーディング代行について</label>
<input type="radio" name="type" id="type2" value="セミナー・レッスンについて" required>
<label for="type2">セミナー・レッスンについて</label>
</td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td><textarea name="content" id="content" cols="40" rows="5" placeholder="お問い合わせ内容" required></textarea></td>
</tr>
</table>
<p class="submit-btn"><input type="submit" value="送信"></p>
</form>
</body>
</html>

関連記事

mmmmofu.hatenablog.com