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

来源：互联网发布：2016淘宝女装排名店铺编辑：程序博客网时间：2024/05/21 11:00
<!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>
阅读全文
0 0