<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基础 :required 及 :optional 示例</title>
    <style>
      body {
        font-family: sans-serif;
        margin: 20px auto;
        max-width: 460px;
      }

      fieldset {
        padding: 10px 30px 0;
      }

      legend {
        color: white;
        background: black;
        padding: 5px 10px;
      }

      fieldset > div {
        margin-bottom: 20px;
      }

      button, label, input {
        display: block;
        font-family: inherit;
        font-size: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 5px;
        height: 30px;
      }

      input {
        box-shadow: inset 1px 1px 3px #ccc;
        border-radius: 5px;
      }

      input:hover, input:focus {
        background-color: #eee;
      }

      input:required {
        border: 1px solid black;
      }

      input:optional {
        border: 1px solid silver;
      }

      button {
        width: 60%;
        margin: 0 auto;
      }
    </style>
</head>

<body>
    <form>
      <fieldset>
        <legend>反馈表单</legend>
        <div>
          <label for="lname">姓：</label>
          <input id="lname" name="lname" type="text" required>
        </div>
        <div>
          <label for="fname">名：</label>
          <input id="fname" name="fname" type="text" required>
        </div>
        <div>
          <label for="email">电子邮件（填写以收到反馈）：</label>
          <input id="email" name="email" type="email">
        </div>
        <div><button>提交</button></div>
      </fieldset>
    </form>
</body>

</html>
