您的位置：首页 > Web前端 > HTML5

form表单的属性及HTML5新特性列举

2017-11-11 16:29 363 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="">
账号：<input type="text" placeholder="请输入账号"><br>
密码：<input type="password" placeholder="请输入密码"><br>
性别：<input type="radio" name="sex" id="1" checked="checked"><label for="1">男</label>  
<input type="radio" name="sex" id="2"> <label for="2">女</label><br>
精通的語言：
<input type="checkbox" checked="checked">java
<input type="checkbox" >html
<input type="checkbox" >css
<input type="checkbox" >Ruby
<input type="checkbox" >python <br>
选择所在省：
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select> <br>
选择组：
<select name="" id="">
<optgroup label="湖北省">
<option value="">wh</option>
<option value="">hs</option>
<option value="">jz</option>
</optgroup>
<optgroup label="湖南省">
<option value="">yy</option>
<option value="">cs</option>
<option value="">zz</option>
</optgroup>
</select> <br>
选择所在专业：<input type="text" list="majors">
<datalist id="majors">
<option value="">q</option>
<option value="">w</option>
<option value="">e</option>
<option value="">r</option>
</datalist> <br>

选择精通的领域：
<select multiple="">
<option value="">文学</option>
<option value="">麻将</option>
<option value="">斗地主</option>
<option value="">软件开发</option>
<option value="">五行八卦</option>
</select> <br>
选择头像：
<input type="file"> <br>
个人简介：
<textarea name="" id="" cols="30" rows="10" placeholder="说点什么吧"></textarea> <br>

时间选择：<input type="time"> <br>
日期选择：<input type="date"> <br>
周选择：<input type="week"> <br>
日期时间选择：<input type="datetime-local"> <br>
月份选择：<input type="month"> <br>
数字选择：<input type="number" min="0" max="100"> <br>
范围选择：<input type="range" mim="0" max="100" value="0"> <br>
邮箱地址：<input type="email"> <br>
手机号：<input type="phone" required pattern="^1[3578]\d{9}$"> <br>
搜索框：<input type="search"> <br>
地址：<input type="url"> <br>
<input type="submit" value="提交">
<input type="reset" value="重置">
普通按钮：<input type="button" value="普通按钮">
提交按钮：<button>提交按钮</button>
</form>
<<!-->对表单分组</!-->
<fieldset style="width: 300px">
<legend>用户登入</legend>
<label for="">用户名</label>
<input type="text"> <br>
<label for="">密码</label>
<input type="password">
<!-->回话跟踪技术组成之一，主要用于在前后端隐式传值</!-->
<input type=" hidden" value="隐藏域的数据是不会在文本显示">
</fieldset>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html5 HTML
相关文章推荐
新的分享
章节导航