<fieldset>
<legend>Input your ID</legend>
<form>
<div>
<label for="display-name"> Name:
<span class="warning">*(least one letter)</span>
</label>
<input type="text" id="display-name" name="ip-display"
pattern="[A-Za-zs]+"
maxlength="5" minlength="2" value="Aa" required />
<span></span>
</div>
<div>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-4567-7890"
pattern="[0-9]{11}"required />
<span class="validity"></span>
</div>
<div>
<label for="primary">email:</label>
<input type="email" placeholder="12345@qq.com"
pattern=".+@qq.com" size="30" />
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
minlength="10" required
placeholder="least 10 letters" />
</div>
<div>
<input type="color" id="head" name="color"
value="#e66465" />
<label for="head">Which color do you like best?</label>
</div>
<div>
<input type="submit" class="submit" value="Submit" />
</div>
</fieldset>
