Form.html
来源:原创
时间:2016-07-17
作者:脚本小站
分类:代码笔记
<!-- input 常用属性: button 按钮 checkbox 单选框 radio 单选圈 file 文件 hidden 隐藏 image 图像 password 密码 reset 重置 submit 提交 text 文本 html5中新标签 required 必须的 <input type="" required />此标签的值必须填写 search 搜索 datatime 时间 date 日期 time 时间 month 月份 week 周 url URL range 等级滑动块 min="0" 滑动的最小值 max="100" 滑动的最大值 step="10" 每隔几个为一格 color 颜色 number 数字 step="0.01" min="0.01"(step 输入小数时加入 min="最小数字" ) email 邮箱 --> <!--------------------------常用表单-----------------------------> <!---------------------------------------------------------------> <form name="input" action="action.php" method="post"> <!-- html5中text标签属性 --> <!-- placeholder 默认显示文字,当插入时文字消失 --> <!-- readonly 只读不可修改 --> <!-- disabled 不可用 --> <input type="text" name="user" value="" maxlength="20"> <input type="text" name="user" value="" placeholder="请输入用户名" > <!-- required 非空 --> <input type="text" name="nicheng" required> <input type="submit" value="Submit" /> </form> <!---------------------------------------------------------------> <!---------------------------文本框------------------------------> <form name="" action="action.php" method="post"> username:<input type="text" name="username" value="Stepen" size="文本框显示的长度" maxlength="可输入文本的最大长度" /><br /> <!--type="text"--> <input type="submit" name="提交" /> </form> <!-- html5中文本框的新功能 --> <!-- 此功能实现输入框双击提示要输入的内容 --> <!-- list为要提示的列表,在 datalist 中写入要提示的内容 --> <input type="text" name="username" list="twenty" > <datalist id="twenty"> <option>twenty-one</option> <option>twenty-two</option> </datalist> <!---------------------------------------------------------------> <!---------------------------单选按钮----------------------------> <form name="input" action="action.php" method="post"> 请选择性别:<br /> <!--------注意:同组的name属性应该相同-------> <!--value值必加--> <!--加checked默认选择--> <input type="radio" name="sex" value="man" checked /> boy <br /> <input type="radio" name="sex" value="girl" /> girl <br /> <input type="submit" value="Submit" /> </form> <!---------------------------------------------------------------> <!-----------------------------复选框----------------------------> <form name="input" action="action.php" method="post"> 请选择爱好:<br /> <!--name属性不可重复--> <input type="checkbox" name="one" value="swim" checked />游泳<br /> <input type="checkbox" name="two" value="football" />足球<br /> <input type="checkbox" name="three" value="basketball" />篮球<br /> <input type="submit" value="Submit" /> </form> <!---------------------------------------------------------------> <!-----------------------------下拉菜单--------------------------> <form name="" action="action.php"> <select name="education[]"> <!--selected默认选项--> <option value="大学">大学</option> <option value="高中">高中</option> <option value="初中">初中</option> <option value="小学" selected >小学</option> </select> </form> <!--html5--> <!----optgroup 将选项分组----> <!-- multiple 下拉框中可选多个值 --> <!-- label为组标题 --> <select name="movie[]" multiple> <!-- group one --> <optgroup label="groupName"> <option>movieOne</option> <!-- 无value值情况下则值为选项内容 --> <option>movieTwo</option> </optgroup> <!-- group two --> <optgroup label="groupName"> <option value="2">movieThree</option><!-- 有value时值为value的值 --> <option value="3">movieFour</option> </optgroup> </select> <!---------------------------------------------------------------> <!---------------------------列表项------------------------------> <form name="" action=""> <!--列表项比下拉列表多一个multiple属性--> <!--size 属性为默认显示数量--> <!-- multiple 多选 --> <!-- disabled 不可选 --> <select name="" multiple size="2"> <!--selected默认选项--> <option value="大学">大学</option> <option value="高中">高中</option> <option value="初中">初中</option> <option value="小学" selected >小学</option> </select> </form> <!---------------------------------------------------------------> <!----------------------------文本域-----------------------------> <form name="" action=""> <textarea name="" rows="" cols=""></textarea> </form> <!---------------------------------------------------------------> <!-----------------------------隐藏域----------------------------> <form name="" action=""> <input type="hidden" name="" value=""> </form> <!---------------------------------------------------------------> <!---------------------------文件上传域--------------------------> <form name="" action="" enctype="multipart/form-data"> <input type="file" size="控件长度" name="" /> </form> <!---------------------------------------------------------------> <!----------------------------提交按钮---------------------------> <form name="" action=""> <!--reset重置按钮--> <input type="submit" name="" value="提交" /> </form> <!---------------------------------------------------------------> <!----------------------------图片按钮---------------------------> <form name="" action=""> <!--图片按钮没有value值--> <input type="image" src="图片地址" name="" /> </form> <!---------------------------------------------------------------> <!--------------------------------------------------------------->