<form>
<label for="name">名前<span class="required">※</span></label>
<input type="text" id="name" required placeholder="入力してください" />
<label for="email">メールアドレス<span class="required">※</span></label>
<input type="email" id="email" required placeholder="入力してください" />
<input type="submit" value="送信" />
</form>
form {
width: 300px;
margin-inline: auto;
}
label {
display: block;
margin-top: 20px;
.required {
color: #d9333f;
}
}
input[type='text'],
input[type='email'] {
width: 100%;
padding: 10px;
margin-top: 5px;
background-color: #fff;
}
input[type='submit'] {
margin-top: 20px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
body {
width: 100%;
background-color: #333;
color: #fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.