HTML5表单（2）

最新推荐文章于 2022-09-05 14:55:21 发布

被涮的小肥羊

最新推荐文章于 2022-09-05 14:55:21 发布

阅读量230

点赞数

分类专栏： HTML5 文章标签： html html5

本文链接：https://blog.csdn.net/qq_42108313/article/details/113122584

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML5表单

文章目录

HTML5表单

6.3 设置属性

6.3.1 名称和值、布尔型属性

名称和值
每个表单控件都应该设置一个名称，该属性有两个作用：1.服务器可以根据 name 获取对应控件提交的值；2.在JavaScript脚本中可以直接使用点语法访问控件对象。
如果需要CSS样式或者DOM访问表单对象，或者需要与< label >标签绑定，还应该为表单控件设置ID属性。
如果表单控件需要向服务器访问传递值，还需要通过设置value 属性值，改值将会传送到服务器端。
设计了一个文本框、密码框、复选框和一个提交按钮，并分别设置name id value属性值，以便绑定标签和提交数据。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
label {  float:left;clear:left; }
input {
    float:left;
    clear:right;
    margin-bottom:8px;
}
input[type="submit"]{
    clear:left;
}
</style>
</head>
<body>
<form id="login-form" action="#" method="post">
    <fieldset>
        <legend>登录表</legend>
        <label for="login">Email</label>
        <input type="text" id="login" name="login" value="" />
        <label for="password">密码</label>
        <input type="password" id="password" name="password" value="" />
        <label for="remember_me">记住状态?</label>
        <input type="checkbox" id="remember_me" name="remember_me" value="1"/>
        <input type="submit"  id="commit" name="commit" value="登 录"/>
    </fieldset>
</form>
</body>
</html>

布尔型属性
元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。因此，在声明布尔型属性时，不用赋值。
1.noshade,用来表示有无阴影，多用于在< hr />标签当中
2.ckecked,用来表示是否默认选中，多用于单选按钮< input type=“radio” / >和多选按钮< input type=“checkbox” / >中，需要注意的是，在< input type=“radio” / >中需要用相同的name才能达到单选框的效果
3.selected,用来表示是否优先显示，用于下拉表单< select >< /select >和只能下拉表单< datalist >中
4.autofocus,用来自动获取焦点，用于有输入框的< input / >标签中
5.readonly，只读属性，可以获取焦点，数据会传递给后台,适合于能输入的文本框，比如text
6.disabled，禁用属性，可以使其无法获取焦点，数据无法传递给后台,在输入文本和按钮都可以用
7.require，用来表示必须选择，多用于< input / >标签中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
label { }
input[type="submit"] { }
</style>
</head>
<body>
<form method="post" action="#" id="choices">
    <fieldset>
        <legend>你是通过什么方式了解我们的？</legend>
        <input type="radio" name="how" value="微信" id="weixin" />
        <label for="weixin">微信</label>
        <input type="radio" name="how" value="微博" id="weibo" />
        <label for="weibo">微博</label>
        <input type="radio" name="how" value="other" id="other" />
        <label for="other">其它</label><br><br>
        <textarea id="other-description" cols="35" rows="5" placeholder="电视，报纸等。 "  disabled="disabled"></textarea><br><br>
        <input type="submit" value="提 交" class="btn" />
    </fieldset>
</form>

<script>
var choices = document.getElementById('choices'),
	textarea = document.getElementById('other-description');
choices.onclick = function(e) {
	var e = e || window.event,
		target = e.target || e.srcElement;
	if (target.getAttribute('type') === 'radio') {
		if (target.id !== 'other') {
			textarea.disabled = true;
		} else {
			textarea.disabled = false;
			textarea.focus();
		}
	}
};
</script>
</body>
</html>

6.3.2 必填、禁止验证

必填
required 可以应用在大多数输入元素上，在提交时。如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。
适用于text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file类型的< input >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="/testform.asp" method="get">
    请输入姓名:
    <input type="text" name="usr_name" required="required" />
    <input type="submit" value="提交" />
</form>
</body>
</html>

禁止验证
novalidate 在提交表单时不应该验证form、input域。适用于< form >标签，以及text、search、url、telephone、email、password、date pickers、range、color类型的< input >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="testform.asp" method="get" novalidate>
    请输入电子邮件地址:
    <input type="email" name="user_email" />
    <input type="submit" value="提交" />
</form>
</body>
</html>

js 调用checkValidity( )主动验证用户输入地址是否有效。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function check(){
    var email = document.getElementById("email");
    if(email.value==""){
        alert("请输入Email地址");    
        return false;
    }    
    else if(!email.checkValidity()){
        alert("请输入正确的Email地址"); 
        return false;
    }
    else
        alert("您输入的Email地址有效");
}
</script>
</head>
<body>
<form id=testform onsubmit="return check();" novalidate>
    <label for=email>Email</label>
    <input name=email id=email type=email />
    <br/>
    <input type=submit>
</form> 
</body>
</html>

6.3.3 多选、自动完成

多选
multiple 一次选择多个值适用于email、file类型的< input >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="testform.asp" method="get">
    请选择要上传的多个文件：
    <input type="file" name="img" multiple />
    <input type="submit" value="提交" />
</form>
</body>
</html>

自动完成
autocomplete 帮助用户在输入框中实现自动完成输入

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="/formexample.asp" method="get" autocomplete="on">
姓名：<input type="text" name="name1" /><br />
职业：<input type="text" name="career1" /><br />
电子邮件地址：<input type="email" name="email1" autocomplete="off" /><br />
<input type="submit" value=”提交信息” />
</form>
</body>
</html>

在这里插入图片描述


<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h2>输入你最喜欢的城市名称</h2>
<form autocompelete="on">
    <input type="text" id="city" list="cityList">
    <datalist id="cityList" style="display:none;">
        <option value="BeiJing">BeiJing</option>
        <option value="QingDao">QingDao</option>
        <option value="QingZhou">QingZhou</option>
        <option value="QingHai">QingHai</option>
    </datalist>
</form>
</body>
</html>

6.3.4 自动获取焦点、所属表单

自动获取焦点


<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
    <p>请仔细阅读许可协议：</p>
    <p>
        <label for="textarea1"></label>
        <textarea name="textarea1" id="textarea1" cols="45" rows="5">许可协议具体内容......</textarea>
    </p>
    <p>
        <input type="submit" value="同意" autofocus>
        <input type="submit" value="拒绝" >
    </p>
</form>
</body>
</html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
    <p>请仔细阅读许可协议：</p>
    <p>
        <label for="textarea1"></label>
        <textarea name="textarea1" id="textarea1" cols="45" rows="5">许可协议具体内容......</textarea>
    </p>
    <p>
        <input id="ok" type="submit" value="同意" autofocus>
        <input type="submit" value="拒绝" >
    </p>
</form>
<script>
if (!("autofocus" in document.createElement("input"))) {
    document.getElementById("ok").focus();
}
</script>
</body>
</html>

所属表单


<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="" method="get" id="form1">
请输入姓名：<input type="text" name="name1" autofocus/>
<input type="submit"  value="提交"/>
</form>
请输入住址：<input type="text" name="address1" form="form1" />
</body>
</html>

6.3.5 表单重写、高和宽

表单重写
表单重写属性适用于提交按钮（input的button和直接的button都可以）
formaction - 重写表单的 action 属性
formenctype - 重写表单的 enctype 属性
formmethod - 重写表单的 method 属性
formnovalidate - 重写表单的 novalidate 属性
formtarget - 重写表单的 target 属性


<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="1.asp" id="testform">
请输入电子邮件地址： <input type="email" name="userid" /><br />
     <input type="submit" value="提交到页面1" formaction="1.asp" />
     <input type="submit" value="提交到页面2" formaction="2.asp" />
     <input type="submit" value="提交到页面3" formaction="3.asp" />
</form>
</body>
</html>

高和宽


<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="testform.asp" method="get">
请输入用户名: <input type="text" name="user_name" /><br />
<input type="image" src="images/submit.png" width="72" height="26" />
</form>
</body>
</html>

6.3.6 最小值、最大值、步长


<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="testform.asp" method="get">
    请输入数值：
    <input type="number" name="number1" min="0" max="12" step="4" />
    <input type="submit" value="提交" />
</form>
</body>
</html>

6.3.7 匹配模式、替换文本

匹配模式
pattern 用于验证input域的模式。JavaScript正则表达式


<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="/testform.asp" method="get">
    请输入邮政编码:
    <input type="text" name="zip_code" pattern="[0-9]{6}"
title="请输入6位数的邮政编码" />
    <input type="submit" value="提交" />
</form>
</body>
</html>

替换文本
placeholder获取焦点后消失

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="/testform.asp" method="get">
    请输入邮政编码:
    <input type="text" name="zip_code" pattern="[0-9]{6}"
placeholder="请输入6位数的邮政编码" />
    <input type="submit" value="提交" />
</form>
</body>
</html>

6.4 项目实战

6.4.1 设计注册页


<!doctype html>
<html>
<head>
<style>
p label {
    width: 180px; 
    float: left;
    text-align: right;
    padding-right: 10px
}
table { margin-left: 80px }
table td { border-bottom: 1px solid #CCCCCC }
input.submit { margin-left: 80px }
input { padding:4px; }
</style>
<meta charset="utf-8">
</head>
<body>
<h1>用户注册</h1>
<form action='#' enctype="application/x-www-form+xml" method="post">
    <p>
        <label for='name'>ID（请使用Email注册）</label>
        <input name='name' required="required" type='email'>
        </input>
    </p>
    <p>
        <label for='password'>密码</label>
        <input name='password' required="required" type='password'>
        </input>
    </p>
    <p>
        <label for='birthday'>出生日期</label>
        <input type='date' name='birthday'>
    </p>
    <p>
        <label for='gender'>国籍</label>
        <select name='country' data='countries.xml'>
        </select>
    </p>
    <p>
        <label for='photo'>个性头像</label>
        <input type='file' name='photo' accept='image/*'>
    </p>
    <table>
        <tr>
            <td><button type="add" template="questionId">+</button> 保密问题</td>
            <td>答案</td>
            <td></td>
        </tr>
        <tr id="questionId" repeat="template" repeat-start="1" repeat-min="1" repeat-max="3">
            <td><input type="text" name="questions[questionId].q"></td>
            <td><input type="text" name="questions[questionId].a"></td>
            <td><button type="remove">删除</button></td>
        </tr>
    </table>
    <p>
        <input type='submit' value='提交信息' class='submit'>
    </p>
</form>
<script type="text/javascript" src="jquery-1.10.2.js"></script> 
<script>
$(function(){
	$("select[data]").each(function() {
		var _this = this;
		$.ajax({
			type:"GET",
			url:$(_this).attr("data"),
			success: function(xml){
				var opts = xml.getElementsByTagName("option");
				$(opts).each(function() {
					$(_this).append('<option value="'+ $(this).val() +'">'+ $(this).text() +'</option>');

                });
			}
		});
    });
})
</script>
</body>
</html>

在这里插入图片描述

6.4.2 表单验证


<!DOCTYPE html>
<html> 
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<div id="content">
    <header>
        <h2>HTML5表单验证</h2>
    </header>
    <section>
        <form method="post" action="" name="myform" class="form" >
            <label for="user_name">真实姓名<br/>
                <input id="user_name" type="text" name="user_name" required pattern="^([\u4e00-\u9fa5]+|([a-z]+\s?)+)$" />
            </label>
            <label for="user_item">比赛项目<br/>
                <input list="ball" id="user_item" type="text" name="user_item" required/>
            </label>
            <datalist id="ball">
                <option value="篮球"/>
                <option value="羽毛球"/>
                <option value="桌球"/>
            </datalist>
            <label for="user_email">电子邮箱<br/>
                <input id="user_email" type="email" name="user_email" pattern="^[0-9a-z][a-z0-9\._-]{1,}@[a-z0-9-]{1,}[a-z0-9]\.[a-z\.]{1,}[a-z]$"  required />
            </label>
            <label for="user_phone">手机号码<br/>
                <input id="user_phone" type="telephone" name="user_phone" pattern="^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$" required/>
            </label>
            <label for="user_id">身份证号
                <input id="user_id" type="text" name="user_id" required pattern="^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$" />
            </label>
            <label for="user_born">出生年月
                <input id="user_born" type="month" name="user_born" required />
            </label>
            <label for="user_rank">名次期望 <span>第<em  id="ranknum">5</em>名</span></label>
            <input id="user_rank" type="range" name="user_rank" value="5" min="1" max="10" step="1" required />
            <br/>
            <button type="submit" name="submit" value="提交表单">提交表单</button>
        </form>
    </section>
</div>
</body>
</html>