今天又学习了前端的form控件，这是我第二遍学习，确实发现不少新东西，把自己觉得常用的记下来
表单控件：
**form：最主要的一个标签，但是这个元素不会生成可是化部分**
属性：
action：表单提交的地址
method：属性值为get/post，该属性必填，默认get
name：指定表单唯一的名字，尽量使其与id值保持一致
target：打开目标地址的方式
input：input是表单中功能最丰富的控件，根据type属性的属性值不同生成不同的功能
属性：
**1、type：**
属性值：text（文本框）、password（密码）、hidden（隐藏）、radio（单选框）、 checkbox（复选框）、image（图像）、file（上传文件）、submit（提交）
**2、checked：**设置单选框、复选框的初始状态是否处于选中状态
注意：要设置单选框，所有的选项的name值要相等
**3、disable：**设置首次加载禁用此元素
**4、maxlength**：指定文本框可输入的字符串的最大长度
**5、readonly：**指定文本框的值不允许修改
**6、size：**指定元素宽度，当type=“hidden”时没有意义
**7、src：**指定图像区域的图像的URL，当type=“image”时有意义
**8、width**：图形的宽度
**9、height**：图像的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>from</title>
</head>
<body>
<form action="http://www.crazyit.org" method="get">
单行文本框<input type="text" id="username" name="username" maxlength="3" /><br/>
不能编辑的文本框：<input type="text" id="readonly" name="readonly" readonly="readonly"/><br>
密码框<input type="password" name="password" type="password" /> <br>
隐藏框<input type="hidden" id="hidden" name="hidden" /><br>
第一组单选框<br>
红：<input type="color" id="color" name="color" value="red" checked /><br>
绿：<input type="radio" id="color2" name="color" value="green"/><br>
蓝：<input type="radio" id="color3" name="color" value="blue" /><br>
第二组单选框：<br>
男性：<input type="radio" id="gender" name="gender" value="male"/><br>
女性：<input type="radio" id="gender2" name="gender" value="female"/><br>
两个复选框：<br>
<input value="leegang.org" type="checkbox" id="web" id="web" checked /><br>
<input type="checkbox" id="web2" name="web" value="crazyit.org" /><br>
文件上传域：<input type="file" id="file" name="file" /> <br>
图像域：<input type="image" src="../image/887.jpg" alt="篮球" width="400" height="300" /> <br>
下面是四个按钮：<br>
<input type="submit" id="ok" name="ok" value="提交"/><br>
<input type="submit" id="dis" disabled name="dis" value="提交" /><br>
<input type="submit" id="cancel" name="cancel" value="重填"/><br>
<input type="submit" id="no" name="no" value="无动作" /><br>
</form>
</body>
</html>
**lable：**定义标签
属性：
for属性：将某个表单控件的id值赋给for，就可以将此lable与此元素联接
select和option元素：设置下拉框，option是下拉框内的选项
属性：
disable：设置禁止使用该列表框和下拉框
multiple：设置此下拉框否允许多选，一旦设置为允许多选，就会生成列表框
size：指定列表框内可以同时显示几个元素
**option：**用于定义列表框选项和菜单项
optgroup：用于定义列表项和菜单项组，该元素下包含的option元素属于该分组
disable：指定禁止用该项
selected：指定该列表初始项是否处于被选中状态
value：指定该选项对应的请求参数值
<form action="#" method="post">
下面是一个下拉菜单：<br>
<select name="skills" id="skills">
<option value="java">java语言</option>
<option value="c">c语言</option>
<option value="rudy"> rudy语言</option>
</select><br>
<br>
<br>
下面是允许多选的列表框：<br>
<select name="books" id="books" size="4" multiple="multiple">
<option value="java">java语言</option>
<option value="Android">Android语言</option>
<option value="ee">轻量级java语言</option>
</select><br><br>
下面是允许多选的列表框：<br>
<select name="leegang" id="leegang" multiple size="6">
<optgroup label="疯狂的java板块一">
<option value="java"> java语言</option>
<option value="Android">Android语言</option>
<option value="ee">eejava轻量级语言</option>
</optgroup>
<optgroup label="其他图书">
<option value="sture"> sture书</option>
<option value="book1"> 其他图书1</option>
<option value="book2">其他图书2</option>
</optgroup>
</select>
</form>
HTML5增强的textarea ：用于生成多行的文本域
属性：
**cols：**指定文本域的宽度
rows：指定文本域的高度
disable：指定禁止使用该文本域
**readonly：**指定该文本域只读
**maxlength：**设置文本域中最多可以输入的字符数
wrap：指定多行文本域是否添加换行符，属性值：soft/hard
fieldset和legend元素：用于对表单内的元素进行分组，放在fieldset内浏览器会用特殊的方式来显示，legend对不同部分的分组进行文字说明
HTML5新增的表单属性
formaction属性：当一个页面里有两个提交按钮时，不用的按钮需要将信息提交到不同的action下，可以给按钮添加此属性
autofocus 属性：当某个表单控件获得此属性后，浏览器打开页面时该控件会自动获取焦点
placeholder 属性： 当用户还未在输入框内输入内容时，输入框内显示提示内容，开始输入时，提示信息会消失
<form method="post">
username: <input type="text" name="name" placeholder="请输入用户名" /><br>
password: <input type="password" name="password" autofocus="true" placeholder="请输入密码" /><br>
<input type="submit" value="login" formaction="login" /> <br>
<input type="submit" value="sign_in" formaction="regist"/>
</form>
**list和datalist属性：**此属性与文本输入框结合，相当于一个下拉框，既可以手动输入内容，可以下拉选择，要求：datalist的id值必须与输入框的list值相同
<form action="#" >
请输入图书：<input type="text" name="name" list="books11" /><p><br>
<input type="submit" value="购买" />
<datalist id="books11">
<option value="java"> java语言</option>
<option value="Android">Android语言</option>
<option value="ee">eejava轻量级语言</option>
</datalist>
</form>
HTML5新增的表单元素
功能丰富的input：type属性值{color（颜色选择器）、date（日期选择器）、time（时间选择器）、datatime-local（本地日期时间选择器）、week（供用户选择第几周的文本框）、month（月份选择器）（max：指定日期时间的最大值；step：指定日期时间的步长）、valueAsDate（获取从1970年1月1日0时0分0秒经历了多少毫秒）、email（email输入框）、tel（手机号输入框）、url（url输入框）、number（之能输入数字的文本框）、range（让input生产一个托条，让用户只能输入指定范围指定步长的值）、search（生成用于输入搜索关键字的文本框，之类文本框只适用于手机设备）}
output ：用于限制指定元素的输出值，用for属性来入其他元素链接
HTML5新增的客户端校验
required：指定空间必须填写
**pattern：**指定空间必须符合指定的正则表达式
**min、max、step：**对日期时间数值型元素进行校验
调用checkValidity 方法进行校验
<form action="#" method="post">
生日：<input type="date" id="birth" name="birth" /><br>
邮箱地址：<input type="email" id="email" name="email" /><br>
<input type="button" value="提交" onclick="return check();"/>
</form>
<div id="demo"></div>
<script type="text/javascript">
var check=function(){
return commonCheck("birth" ,"生日" ,"此字段必须是有效日期")&&commonCheck("email","邮箱地址","此字段必须符合电子邮件的格式");
}
var commonCheck=function(field,fieldname,tip){
var targetEle=document.getElementById(field);
if(targetEle.value.trim()==""){
var html = document.getElementById("demo").innerHTML+fieldname+'是空的 ';
document.getElementById("demo").innerHTML = html;
return flase;
}else if(!targetEle.checkValidity()){
alert(fieldname+tip);
return flase;
}
return true;
}
</script>
2649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
