基本フォーム1レスポンシブWebデザイン

Demo

HTML&CSS

HTMLindex.htmldownload

<div class="form_simple1">

	<form action="" method="post">

		<p><label for="post_number">郵便番号</label></p>

		<input type="text" name="post_number" id="post_number">

		<p><label for="address">住所</label></p>

		<input type="text" name="address" id="address">

		<p><label for="name">氏名</label></p>

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

		<p><label for="tel">電話番号</label></p>

		<input type="text" name="tel" id="tel">

		<p><label for="e_mail">メールアドレス</label></p>

		<input type="text" name="e_mail" id="e_mail">

		<button type="submit" name="send" value="form_simple1">送信</button>
	</form>
</div>

CSSstyle.cssdownload

.form_simple1{
	width: 80%;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	padding: 2rem;
	border: 1px solid #ccc;
}
.form_simple1 input{
	display: block;
	width: 100%;
	height: 2rem;
	outline: none;
	margin-bottom: 1rem;
	border: 1px solid #ccc;
}
.form_simple1 button{
	display: block;
	cursor: pointer;
	outline: none;
	padding: 1rem 2rem;
	margin-top: 2rem;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #ccc;
}
© 2025 wayday