概要
お問い合わせなどに使用するフォームパーツを使用頻度の高いものを抜粋して紹介。用途
- 使用頻度の高いフォームパーツのまとめ
- デフォルトのスタイルを削除
検証ブラウザ
- Microsoft Edge(最新)
- IE11
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
実装方法
HTML
<p style="font-size: 1.5rem; font-weight: 500; margin-top: 2em; color: red;">↓ デフォルトのスタイル削除前</p>
<form action="#">
<dl>
<dt>テキスト</dt>
<dd>
<input type="text" name="text">
</dd>
</dl>
<dl>
<dt>電話番号</dt>
<dd>
<input type="tel" name="tel">
</dd>
</dl>
<dl>
<dt>URL</dt>
<dd>
<input type="url" name="url">
</dd>
</dl>
<dl>
<dt>メール</dt>
<dd>
<input type="email" name="email">
</dd>
</dl>
<dl>
<dt>パスワード</dt>
<dd>
<input type="password" name="password">
</dd>
</dl>
<dl>
<dt>数値</dt>
<dd>
<input type="number" name="number">
</dd>
</dl>
<dl>
<dt>必須項目(テキスト)</dt>
<dd>
<input type="text" required="required">
</dd>
</dl>
<dl>
<dt>使用不可(テキスト)</dt>
<dd>
<input type="text" disabled="disabled">
</dd>
</dl>
<dl>
<dt>プレースホルダ(見本)</dt>
<dd>
<input type="text" placeholder="プレースホルダ入力欄">
</dd>
</dl>
<dl>
<dt>複数選択</dt>
<dd>
<label>
<input type="checkbox" name="checkbox" value="Choice1" checked="checked">選択肢１(初期値)
</label>
<label>
<input type="checkbox" name="checkbox" value="Choice2">選択肢２
</label>
</dd>
</dl>
<dl>
<dt>単一選択</dt>
<dd>
<label>
<input type="radio" name="radio" value="Choice1">選択肢１
</label>
<label>
<input type="radio" name="radio" value="Choice2">選択肢２
</label>
</dd>
</dl>
<dl>
<dt>ファイル送信</dt>
<dd>
<input type="file" accept="application/excel, image/gif, image/jpeg">
<p>※任意で受信可能なMIMEタイプを指定</p>
</dd>
</dl>
<dl>
<dt>セレクトボックス</dt>
<dd>
<select name="select">
<option value="Choice1">選択肢１(初期値)</option>
<option value="Choice2">選択肢２</option>
<option value="Choice3">選択肢３</option>
</select>
</dd>
</dl>
<dl>
<dt>テキスト(改行可)</dt>
<dd>
<textarea name="textarea" cols="30" rows="10"></textarea>
</dd>
</dl>
<button type="submit">送信</button>
<button type="reset">リセット</button>
<button type="button">汎用のプッシュ</button>
</form>
<p style="font-size: 1.5rem; font-weight: 500; margin-top: 3em; color: red;">↓ デフォルトのスタイル削除後</p>
<form action="#" class="c-form">
<dl>
<dt>テキスト</dt>
<dd>
<input type="text" name="text">
</dd>
</dl>
<dl>
<dt>電話番号</dt>
<dd>
<input type="tel" name="tel">
</dd>
</dl>
<dl>
<dt>URL</dt>
<dd>
<input type="url" name="url">
</dd>
</dl>
<dl>
<dt>メール</dt>
<dd>
<input type="email" name="email">
</dd>
</dl>
<dl>
<dt>パスワード</dt>
<dd>
<input type="password" name="password">
</dd>
</dl>
<dl>
<dt>数値</dt>
<dd>
<input type="number" name="number">
</dd>
</dl>
<dl>
<dt>必須項目(テキスト)</dt>
<dd>
<input type="text" required="required">
</dd>
</dl>
<dl>
<dt>使用不可(テキスト)</dt>
<dd>
<input type="text" disabled="disabled">
</dd>
</dl>
<dl>
<dt>プレースホルダ(見本)</dt>
<dd>
<input type="text" placeholder="プレースホルダ入力欄">
</dd>
</dl>
<dl>
<dt>複数選択</dt>
<dd>
<label>
<input type="checkbox" name="checkbox" value="Choice1" checked="checked">選択肢１(初期値)
</label>
<label>
<input type="checkbox" name="checkbox" value="Choice2">選択肢２
</label>
</dd>
</dl>
<dl>
<dt>単一選択</dt>
<dd>
<label>
<input type="radio" name="radio" value="Choice1">選択肢１
</label>
<label>
<input type="radio" name="radio" value="Choice2">選択肢２
</label>
</dd>
</dl>
<dl>
<dt>ファイル送信</dt>
<dd>
<input type="file" accept="application/excel, image/gif, image/jpeg">
<p>※任意で受信可能なMIMEタイプを指定</p>
</dd>
</dl>
<dl>
<dt>セレクトボックス</dt>
<dd>
<select name="select">
<option value="Choice1">選択肢１(初期値)</option>
<option value="Choice2">選択肢２</option>
<option value="Choice3">選択肢３</option>
</select>
</dd>
</dl>
<dl>
<dt>テキスト(改行可)</dt>
<dd>
<textarea name="textarea" cols="30" rows="10"></textarea>
</dd>
</dl>
<button type="submit">送信</button>
<button type="reset">リセット</button>
<button type="button">汎用のプッシュ</button>
</form>
CSS（デフォルトのスタイル削除）
input,
button,
textarea,
select {
margin: 0;
padding: 0;
outline: none;
border: none;
box-shadow: none;
border-radius: 0;
background: none;
text-indent: 0.01px;
text-overflow: '';
-webkit-appearance: none;
appearance: none;
}
button {
cursor: pointer;
}
select::-ms-expand {
display: none;
}
textarea {
display: block;
overflow: auto;
resize: none;
}
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
