html5使用form创建注册表单的现代实践 html5使用新输入类型的例子

<form action="/register" method="post">
  <fieldset>
    <legend>用户注册</legend>

    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required minlength="3" autocomplete="username">

    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required autocomplete="email">

    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required minlength="8" autocomplete="new-password">

    <label for="confirmPassword">确认密码：</label>
    <input type="password" id="confirmPassword" name="confirmPassword" required autocomplete="new-password">

    <button type="submit">注册</button>
  </fieldset>
</form>

<label for="birthDate">出生日期：</label>
<input type="date" id="birthDate" name="birthDate" max="2006-01-01" required>

<label for="phone">手机号：</label>
<input type="tel" id="phone" name="phone" 
       pattern="[0-9]{11}" title="请输入11位手机号码" required>

<label for="website">个人网站：</label>
<input type="url" id="website" name="website" placeholder="https://example.com">

<label for="favoriteColor">喜欢的颜色：</label>
<input type="color" id="favoriteColor" name="favoriteColor" value="#3366ff">

<input type="text" name="username" 
       pattern="[a-zA-Z0-9_]{3,}" 
       title="用户名由字母、数字或下划线组成，至少3位" required>