基本框架：
<form action="提交的地址" method="提交的方式">
<input name="表单元素的名字" type="类型" value="值" size="显示宽度" maxlength="能输入的最大字符长度" checked="是否选中">
<select name="制定列表的名字" size="同时看到的行数">
<option value="可选的值">内容</option>
<option value="可选的值">内容</option>
<option value="可选的值">内容</option>
</select>
<textarea name="" cols="=多行文本的列数" row="多行文本的行数">初始文本内容</textarea>
<input type="submit" name="submit">
</form>
- action属性：发送表单到达的地址
- method属性：有两个值“get”和“post”，使用 get 时，表单数据将在页面地址中显示。如果表单正在更新数据或使用敏感信息 （密码），请使用 post。post 提供更好的安全性，因为提交的数据在页面地址中不可见
- name属性：指表单的名称
- type属性：1.text：文本框 2.password：密码框（注：密码框输入的字符都是“*”） 3.radio：单选按钮使用（注：单选的几个选项的name名字一定要一致,组成一个分组，否则无法单选） 4. checkbox：复选框 5.color：颜色 6.date：年月日 日期 7.month：年月 日期 8.week：星期 日期 9.time：时间 日期 10.datetime-local：时间输入控件 11.rang：范围选择控件 12.select和option：列表框，name指的是列表的名称，在select属性中写的size指的是列表中可看到的行数， slected表示选项在默认的情况下是被选中的，如同单选按钮一样 13.submit:按钮 14.textarea：多行文本 15 .file： 上传文件 16.search：搜索关键字的输入框 （可以单独使用，也可以和datalist一起使用） 17.tel:手机号码输入（可以单独使用，也可以和datalist一起使用，如果有输入数字限定，可以使用patter属性） 18.URL：绝对路径地址，网址必须以http:// 的形式写出来（也可以用datalist建议输入列表一起使用） 19.email：单个邮箱地址 （也可以用datalist建议输入列表一起使用）（注：多个邮箱地址的输入，可以加入 multipe,但是必须用“，”隔开） 20.number：数字输入框 （不是所有控件浏览器都兼容，可以在http：//caniuse.com/ 这个网站去查询兼容性）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>评论</title>
</head>
<body>
<form action="url" method="post">
<p>名字<input type="text" name="name" size="11"></p>
<!--文本框-->
<p>密码<input type="password" name="password" size="11"></p>
<!--密码框-->
<input type="radio" name="lulu" value="lulu">璐璐<br/>
<input type="radio" name="lulu" value="bobi">波比<br/><br/>
<!--单选按钮-->
<input type="checkbox" name="vehicle" value="red">吃鸡<br/>
<input type="checkbox" name="vehicle" value="bule">LOL<br/><br/>
<!--多选按钮-->
<input type="color">颜色<br/><br/>
<input type="date" value="年/月/日">年/月/日<br/><br/>
<input type="month">年/月<br/><br/>
<input type="week">星期<br/><br/>
<input type="time">time<br/><br/>
<input type="datetime-local">日期和时间的输入控件<br/><br/>
<!--type其他的效果-->
<input type="range" min="1" max="10" list="range">
<datalist id="range">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</datalist><br/><br/>
<!--范围选择控件-->
<select name="yuefen" size="">
<option value="" selected="selected">选择月份</option>
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四月</option>
<option value="5">五月</option>
<option value="6">六月</option>
</select>月<br/><br/> //size表示显示几个
<select name="yuefen" size="3">
<option value="" selected="selected">选择月份</option>
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四月</option>
<option value="5">五月</option>
<option value="6">六月</option>
</select>月<br/><br/>
<!--列表框-->
<input type="submit" value="submit"><br/><br/>
<!--按钮-->
<textarea name="textarea" cols="20" rows="6">多行文本</textarea><br/>
<!--多行文本-->
需要上传的文件：<input type="files" name="files">
<input type="submit" name="upload" value="上传"><br/><br/>
<!--文本域，本地图片，文档的上传-->
<input type="search" list="word">
<datalist id="word">
<option value="fame"></option>
<option value="asdf"></option>
</datalist>关键字搜索框<br/><br/>
<!--搜索框-->
<input type="tel" list="zxc" pattern="[\\d]{11}">
<datalist id="zxc">
<option value="123"></option>
<option value="456"></option>
</datalist>手机号码<br/><br/>
<!--电话号码输入框，pattern的意思是说只能输入11个数字，不是11个数字无法提交-->
<input type="URL">绝对路径地址<br/><br/>
<!--绝对路径-->
<input type="email" datalis>邮箱地址<br/><br/>
<!--单个邮箱，加入datalis后可以输入多个邮箱，但是必须用逗号隔开-->
<input type="number">数字输入框
</form>
</body>
</html>
扫一扫
4835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
