【HTML・CSS】フォームの作り方『見た目編』

html formCSS



当記事アイキャッチのような問い合わせフォームの見た目を作っていきます。

個人的にフォームはtableタグを使うと作りやすいかと思っております。
(縦列が自動でそろうため)




①HTMLの記述

<div class="contact-form">
	<form method="" action="">
		<table>
			<tr><th>お名前</th><td><input type="text"></td></tr>
			<tr><th>メールアドレス</th><td><input type="email"></td></tr>
			<tr><th>電話番号</th><td><input type="tel"></td></tr>
			<tr>
				<th>性別</th>
				<td>
					<label><input type="radio" name="gender" value="1">男</label>
					<label><input type="radio" name="gender" value="2">女</label>
				</td>
			</tr>
			<tr><th>問い合わせ内容</th><td><textarea></textarea></td></tr>
		</table>
		<input class="submit-btn" type="submit" value="いっけー">
	</form>
</div>


フォームのひな型ができました。
今回は見た目の調整なので、formのactionとmethodは空にしておきます。
データ送信に必要なname属性なども書いていません。

テーブルの行にはtrタグ、項目にはth(テーブルヘッダー)タグ、データにはtd(テーブルデータ)タグを基本的に使います。

お名前
メールアドレス
電話番号
性別
問い合わせ内容



ここからCSSで見た目を調整していきます。


②全体の横幅を決める

.contact-form{
		width:80%;
		margin:0 auto;
}
.contact-form table, .contact-form .submit-btn{
		width:100%;
        margin-bottom:15px;
}
お名前
メールアドレス
電話番号
性別
問い合わせ内容


枠に横幅を設定し、真ん中寄せ。中身(tableと送信ボタン)の横幅を枠いっぱいに広げています。
わかりやすいようにデモでは背景に色を付けています。




connaiconnai

③thとtdの横幅の割合を決める

	.contact-form th{
		text-align:left;
		width:25%;
	}
	.contact-form td{
		width:75%;
	}
お名前
メールアドレス
電話番号
性別
問い合わせ内容


ここではテーブルは2列なので25%と75%で列幅を割り振っています。
ついでにテーブルヘッダーの文字を左寄せにしています。




④入力欄、ボタンのサイズを調整

.contact-form input:not(input[type="radio"]), .contact-form textarea{
	width:100%;
}
.contact-form input:not(input[type="radio"]){
	height:35px;
}
.contact-form textarea{
	height:200px;
}
.contact-form label{
    display:block;
}
お名前
メールアドレス
電話番号
性別
問い合わせ内容


入力欄の横幅を枠いっぱいに広げ、縦幅を任意の数値で設定しました。



⑤行間をあける

.contact-form th{
   padding:8px 0;
  vertical-align:top;
}



行間をあける。最後に背景色を消して完成です。

お名前
メールアドレス
電話番号
性別
問い合わせ内容








ソースコード全文

最後にソースコード全文を載せておきます。

<div class="contact-form">
	<form method="" action="">
		<table>
			<tr><th>お名前</th><td><input type="text"></td></tr>
			<tr><th>メールアドレス</th><td><input type="email"></td></tr>
			<tr><th>電話番号</th><td><input type="tel"></td></tr>
			<tr>
				<th>性別</th>
				<td>
					<label><input type="radio" name="gender" value="1">男</label>
					<label><input type="radio" name="gender" value="2">女</label>
				</td>
			</tr>
			<tr><th>問い合わせ内容</th><td><textarea></textarea></td></tr>
		</table>
		<input class="submit-btn" type="submit" value="いっけー">
	</form>
</div>


<style>
	.contact-form{
		width:80%;
		margin:0 auto;
	}
	.contact-form table{
		width:100%;
		margin-bottom:15px;
	}
	.contact-form th{
		text-align:left;
		width:25%;
		padding:8px 0;
		vertical-align:top;
	}
	.contact-form td{
		background-color:blue;
		width:75%;
	}
	.contact-form input:not(input[type="radio"]), .contact-form textarea{
		width:100%;
	}
	.contact-form input:not(input[type="radio"]){
		height:35px;
	}
	.contact-form textarea{
		height:200px;
	}
	.contact-form label{
		display:block;
	}
</style>

コメント

タイトルとURLをコピーしました