PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【HTML】フォームを作る

HTMLでフォームを作ります。PHPなども絡んでくるところですが、とりあえずHTMLのみで組みます。

 

基本

formタグの中に、methodとactionを必ず付け加えます。
methodはやりたい動作に応じて帰る必要があります。

<form method="URI" action="送信方法">
</form>

 

1行テキストフォーム

1行のテキストフォームにはinputタグを使います。

<input type="text" name="フォームの値の名前">

 

複数行フォーム

複数行にはtextareaタグを使います。

<textarea name="フォームの名前" cols="文字数" rows="行数"></textarea>

 

ラジオボタン

一つだけ選べる複数の項目を作ります。inputタグの type属性を radio にします。この時に labelタグで囲うことで、テキストを押してもラジオボタンを押したことになります。

<label><input type="radio" name="ラジオボタン群の名前" value="値"> テキスト</label>

 

チェックボックス

複数選べる項目を作ります。inputタグの type属性を checkbox にします。

<label><input type="checkbox" name="チェックボックス群の名前" value="値">インターネット</label>

 

リストメニューから選ぶ

リストメニューから選べる項目を作ります。selectタグと optionタグを使います。optionタグで項目を作り、selectタグで囲います。

<select name="リストの名前"><option value="値"> 値のテキスト</option></select>

 

送信ボタンを作る

フォームの内容をactionに送るための送信ボタンを作ります。inpuタグの type を submit にします。

<input type="submit" name="submit" value=" 送信 ">

入力必須の項目を作る

入力必須の項目を作るには、各項目の属性に「required」を加えます。

<input type="text" name="name" required>

 

テキストフォームに例文を入れておく

テキストフォームに例文を入れるために、各属性に「placeholder=""」を加えます。

<input type="text" name="name" placeholder="田中さん" required>

 

ページを読み込んだ時からテキストフォームに入力できる状態にしておく

ページを読み込んだ時に、テキストフォームをクリックしなくても、最初から入力できる状態にしておきます。属性に「autofocus」を加えます

<input type="text" name="name" autofocus placeholder="田中さん" required>

 

テキストフォーム例


名前
電話番号
備考
性別
都道府県
趣味






ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォームの練習</title>

</head>
<body>
<form method="post" action="outoput.php">
<table>
<tr>
<td>名前</td><td><input type="text" name="name" autofocus placeholder="田中さん" required></td>
</tr>
<tr>
<td>電話番号</td><td><input type="tel" name="tel" placeholder="03123456" required></td>
</tr>
<tr>
<td>備考</td><td><textarea name="note" cols="40" rows="5"></textarea></td>
</tr>
<tr>
<td>性別</td>
<td><label><input type="radio" name="gender" value="1"> 男性</label><label><input type="radio" name="gender" value="2"> 女性</label><label><input type="radio" name="sex" value="9"> 解答しない </label></td>
</tr>
<tr>
<td>都道府県</td>
<td><select name="pref"><option value="1"> 北海道 </option><option value="2"> 青森県 </option><option value="3"> 岩手県 </option><option value="47"> 沖縄県 </option></select></td>
</tr>
<tr>
<td>趣味</td>
<td>
<label><input type="checkbox" name="hobby[]" value="1">インターネット</label>
<label><input type="checkbox" name="hobby[]" value="2"> 読書</label>
<label><input type="checkbox" name="hobby[]" value="3">ショッピング</label>
<label><input type="checkbox" name="hobby[]" value="4">サイクリング</label>
<label><input type="checkbox" name="hobby[]" value="5">音楽鑑賞</label>
</td>
</tr>
<tr><td><input type="submit" name="submit" value=" 送信 "> </td></tr>
</table>

</form>
</body>
</html>