<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;
  }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.