html5 表单元素

时间 2019-12-05

标签 html5 html 表单元素栏目 HTML5 繁體版

原文原文链接

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5中的表单</title>

<script type="text/javascript">

  var flag = true;
   function checkMail(){
	   var url = document.getElementById("url");
	   if (url.value==""){
		   //表单提交时 自定义验证信息 
		   
		   url.setCustomValidity("请输入url地址");
		   
		  // alert("url地址不能不空");
		   flag=false;
	   }
	   //显式调用 checkValidity()方法 ，验证经过返回true
	   else if (!url.checkValidity()){
		   alert("请输入合法的url地址");
		   flag= false;
	   }
	   else {
		   alert("恭喜您输入的url地址合法");
	   }
	   return flag;
   }
 
</script>
</head>
<body>
   
   <!--
   novalidate="novalidate" 忽略表单的验证
     -->
  <form id="sub" method="post"    >
      <!-- placeholder属性设置文本域未输入信息的提示信息 -->
      <!-- autofocus自动获取焦点  -->
      <!-- tabindex当设置值时1,2，3...
      按tab键切换时会按照指定的值，依次切换 ..
       -->
    用户名: <input name="username" placeholder="请输入用户名" autofocus="autofocus" formmethod="get" tabindex="1">
     
     <!-- list属性引用指定的datalist的id -->
     <!-- formmethod指定该元素表单提交的方式post或者get -->
     <!-- autocompleter:自动补全内容 -->
     
   爱好: <input name="fav" autocomplete="off" list="data"  tabindex="3" formmethod="post" >
     
     
     颜色选取:<input name="color" type="color">
     
     <!-- 显示验证url,
     应在表单提交时验证，此处方便测试就添加失去焦点事件 
     -->
   url:  <input type="url" id="url" name="url" onblur="checkMail();">
   
     mail:<input name="email" type="email" required>
     
       <!-- date类型，火狐,ie9 中测试不支持，
       chrome 支持....,
       datetime类型:这三款浏览器都不支持，
       datetime-local:只有chrome支持,
       time:时间输入框,chrome支持,
       week:某一年的第几周,chrome支持,
       month:某一年的第几月,chrome支持,
        -->
     出生日期:<input name="date" type="month">
     
     <!-- number: min,max :最小值和最大值；step表示变化的幅度-->
     薪资:<input type="number" min="0" max="100" step="10">
        
      <!-- 
      添加pattern属性利用正则表达式限制属性的内容
       -->
     年龄:<input type="text" required="required" pattern="^[0-9]{0,3}$"/>
        
     <!-- html5中的type="submit",不指定value属性时默认显示提交查询
     formaction指定提交的路径,
      -->
      
      <!-- 取消表单验证: 一、 添加 formnovalidate="formnovalidate"
                    2. form元素中添加 novalidate="novalidate"
      
       -->
      
     <input type="submit"  formaction="sub.jsp" >
  </form>
   
   <!-- 
   form属性定义该元素指向的表单的id,
   required :表示该字段必填
    -->
  密码: <input  name="pwd" type="password" tabindex="2" required="required" form="sub">
   <!-- datalist是html5新增标签，相似于select -->
  <datalist id="data">
    <option value="java">java</option>
     <option value="c">C</option>
   <option value="c++">C++</option>
    <option value="python">python</option>
  </datalist>

</body>
</html>

1. HTML5 表单元素
2. 前端基础-HTML5（表单元素）
3. HTML5 表单新增元素与属性
4. [前端]html5表单元素整理
5. HTML5新增属性和表单元素
6. HTML5表单元素的新增属性
7. h5-表单元素
8. HTML表单元素
9. 表单元素
10. 表单及表单新增元素
更多相关文章...
• jQuery Mobile 表单输入元素 - jQuery Mobile 教程
• jQuery Mobile 表单 - jQuery Mobile 教程
• TiDB 在摩拜单车在线数据业务的应用和实践
• C# 中 foreach 遍历的用法