Form_Sample

form_sample.markdown

Form_Sample

A Pen by ManamiMatsuura on CodePen.

License.

index.html

<div class="main-section">
	<h1 class="title">フォームサンプル</h1>
	<form id="contact" action="" method="post">
		<div class="input-block">
			<p>通常のinput</p>
			<fieldset>
				<label>名前:</label>
				 <input placeholder="名字" type="text" tabindex="1"autocomplete="family-name">
				<input placeholder="名前" type="text" tabindex="1"autocomplete="given-name">
			</fieldset>
		</div>
		<hr>
		<div class="input-block">
			<p>type="name"</p>
			<fieldset>
				<label>生年月日:</label>
				<input type="date">
			</fieldset>
			<p>type="number"</p>
			<fieldset>
				<label>生年月日：</label>
				<input placeholder="年" type="number" name="year" id="year" maxlength="4" autocomplate="bday-year">年
				<input placeholder="月" type="number" name="month" id="month" maxlength="2" autocomplate="bday-month">月
				<input placeholder="日" type="number" name="day" id="day" maxlength="2">日
			</fieldset> 	
		</div>
		<hr>
		<div class="input-block">
			<p>type="number"</p>
			<fieldset>
				<label>電話番号:</label>
				<input placeholder="電話番号" type="number" name="tel" id="tel" autocomplete="tel">
			</fieldset>
			<fieldset>
				<label>電話番号:</label>
				<input placeholder="電話番号" type="tel" name="tel" id="tel" autocomplete="tel-local">
			</fieldset>
		</div>
		<div class="input-block">
			<p>type="color"</p>
				<input type="color" name="color">
			<fieldset>
			</fieldset>
		</div>
 </form>
 </div>

style.css

.main-section {
 vertical-align: middle;
 text-align: center;
 margin: 0 auto;
}

fieldset {
   border:0 none;
}

.input-block {
  border
}