Front-end development html5 form test
Below in the form of a simple test using the tag fieldset form part of the packaging content, generates a set of related form fields. When a group of form elements placed within the fieldset tag, the browser will display them in a special way, they may have special border, 3D effects, or even create a sub-form to deal with these elements. fieldset tag no required or unique properties. legend label for the fieldset element defines the title. Which nested tables, ul tag represents disorder, ol representatives orderly. input type in the type of property on behalf of, the form type, the following types demo form.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单测试</title>
</head>
<body>
<form action="" method="post">
<fieldset id="">
<legend>注册信息</legend>
<ul>
<li>
<label>账号</label>
<input type="text" name="" id="" value="" placeholder="请输入11位以内的数字" size="11" /> <!-- size代表最大输入的长度 placeholder代表没有输入的时候提示的文字 -->
</li>
<li>
<label>密码</label>
<input type="password" name="password" id="paw" size="20" placeholder="请设置多种类" />
</li>
<li>
<label>邮箱</label>
<input type="email" name="input_email" id="input_email" value="" placeholder="[email protected]" /></li>
<li>
<label>出生日期</label>
<input type="date" value="2019-01-01" name="date">
</li>
<li>
<label>上传文件</label>
<input type="file" name="" id="" value="" />
</li>
<li>
<label>优先级</label>
<input type="range" name="" id="" value="" />
</li>
<li>
<label>选值框</label>
<input type="number" name="" id="" value="" min="0" max="1000" />
</li>
<li>
<label>URL字段</label>
<input type="url" name="" id="" value="" />
</li>
<li><label>颜色</label>
<input type="color" name="" id="" value="" />
</li>
<li>
<label>提交框</label>
<input type="submit" name="submit" id="submit" value="提交" />
</li>
</ul>
</fieldset>
</form>
</body>
</html>
input attributes
