表单与文件
form属性
<html>
<head>
</head>
<body>
<!--创建一个表单 定义他的ID-->
<form id="textform">
<!--创建一个输入框类型为text文本类型-->
<input type="text">
</form>
<!--textarea标签定义多行的文本输入控件 将表单放进里面-->
<textarea form="textform"></textarea>
</body>
</html>
formaction属性
<html>
<head>
</head>
<body>
<!--创建一个表单 定义ID和 action属性是用来对表单内所有元素统一制定提交页面-->
<form id="textform" action="serve.jsp">
<!--定义四个输入框 submit表单中的一个提交按钮 formation点击了链接到s1.jsp去-->
<input type="submit" name="s1" value="v1" formation="s1.jsp">提交到s1
<input type="submit" name="s2" value="v2" formation="s2.jsp">提交到s2
<input type="submit" name="s3" value="v3" formation="s3.jsp">提交到s3
<input type="submit">
</form>
</body>
</html>
placeholder属性
<html>
<head>
</head>
<body>
<!--placeholder属性是在输入框内没有出现任何字符串时显示input me 当有字符串时就会被字符串代替当把字符串删除掉后又会重新出现-->
<input type="text" placeholder="input me">
</body>
</html>
autofocus属性
<html>
<head>
</head>
<body>
<!--autofocus 当加入时打开页面后会自动获得光标焦点-->
<input type="text" autofocus>
</body>
</html>
list属性
<head>
<title>list属性示例</title>
</head>
<!--定义一个输入框 类型text-->
text: <input type="text" name="greeting" list="greeting">
<!--datelist属性是在用户输入的值和下面的不一样时正常输入但是在输入的一样时 下面会出现一个相应的选择提示框里面的值可以直接点击后到用户的输入框内 为了SEO，也就是搜索引擎优化，display: none在隐藏的层里适当的做些“关键词”-->
<datelist id="greetings" style="display: none;">
<!--创建三个 option定义下拉列表中的一个选项-->
<option value="Good Morning">Good Morning</option>
<option value="Hello">Hello</option>
<option value="Good Afternoon">Good Afternoon</option>
</datelist>
<!--但是当前的功能只能在Opera 10 欧友 10游览器内实现-->
autocomplete属性
<html>
<head>
</head>
<body>
<!--定义一个输入框类型是text autocomplete属性可以指定"on" "off" " "(不指定) 可以控制输入的值的显示成三个指定的值提高安全性-->
<input type="text" name="greeting" autocomplete="on" list="greeting">
<!--欧友 10才能实现-->
</body>
</html>
url类型
<html>
<head>
</head>
<body>
<!--创建一个输入框 url专门输入网页地址的文本框 提交时要是文本框里内容不是url地址格式文字就不能提交-->
<input name="urll" type="url" value="http://www.microsoft.com">
<!--欧友-->
</body>
</html>
email类型
<html>
<head>
</head>
<body>
<!--email 邮件地址类型要是提交的文本内容和值不相同则不能提交 但是可以提交空的-->
<input name="eamill" type="email" value="[email protected]">
<!--欧友-->
</body>
</html>
date类型
<html>
<head>
</head>
<body>
<!--date是日期类型 可能显示年/月/日-->
<input name="date1" type="date" value="2010-10-02">
</body>
</html>
time类型
<html>
<head>
</head>
<body>
<!--time属性是一个时间的类型 可能用来调节时间 可以精确到秒-->
<input name="timel" type="time" value="10:00">
</body>
</html>
datetime类型
<html>
<head>
</head>
<body>
<!--datetime是专门用来输入日期和时间的文本框-->
<input name="datetme1" type="datetime">
<!--欧友-->
</body>
</html>
datetime-local类型
<html>
<head>
</head>
<body>
<!--dateime-local属性是用来定义本地日期和时间的文本框-->
<input name="datetime-loacall" type="datetime-local">
<!--欧友-->
</body>
</html>
month类型
<html>
<head>
</head>
<body>
<!--month属性是一种专门用来输入月份的文本框-->
<input name="month1" type="month" value="2010-10">
<!--欧友-->
</body>
</html>
week类型
<html>
<head>
</head>
<body>
<!--week属性是专门用来输入周号的文本框w07就代表2010年的7周 w40就是2010年第40周-->
<input name="week1" type="week" value="2010-w40">
<!--欧友-->
</body>
</html>
range类型
<html>
<head>
</head>
<body>
<!--range属性一种只允许输入一段范围内数值的文本框 它是有最小min 和最大max值的 和每一格代表多少数字-->
<input name="range1" type="range" value="25" min="0" max="100" step="5">
</body>
</html>
output元素的追加
<html>
<head>
</head>
<body>
<!--创建一个表单-->
<form id="testform">
<!--创建一个输入框 类型range属性一种只允许输入一段范围内数值的文本框 它是有最小min 和最大max值的 和每一格代表多少数字 -->
<input name="range1" type=range min=0 max=100 step=5>
<!--output 元素定义不同的类型输出 必须把添加到表单内部或者添加到form属性里 来显示值-->
<output onforminput="value=range1.value">50</output>
</form>
</body>
</html>
自动验证
<html>
<head>
</head>
<body>
<!--创建一个表单 method属性规定如何发送表单数据 post传送的方式-->
<form method="post">
<!--创建一个输入框 是文本类型 required属性规定必需在提交之前填写输入字段 pattern属性规定用于验证输入字段的模式-->
<input name="text" type="text" required pattern="^\w.*$">
<!--创建一个输入框 submit表单中的一个提交按钮类型-->
<input type="submit">
</body>
</html>
pattern属性
<html>
<head>
</head>
<body>
<!--可创建一个输入框 pattern属性规定用于验证输入字段的模式 -->
<input pattern="[0-9][A-Z]{3}" name=part placeholder="输入内容:一个数字于三个大写字母。">
</body>
</html>
自定义错误信息
<html>
<head>
<script language="javascript">
function check()
{
<!--定义两个变量-->
var pass1=document.getElementById("pass1");
var pass2=document.getElementById("pass2");
<!--判断pass1的值不等于pass2的值 就输出密码不一致-->
fi(pass1.value!=pass2.value)
pass2.setCustomValidity("密码不一致");
<!--否则-->
else
<!--就显示空-->
pass2.setCustomValidity("");
<!--定义变量 email-->
var email=document.getElementById("email");
<!--判断 email checkValidity()来检测表单验证的有效性-->
if(!email.checkValidity())
<!--email输入不正确就显示 请输入正确的Email地址。-->
email.setCustomValidity("请输入正确的Email地址。");
}
</script>
<!--创建表单 onSubmit在点submit按钮时被触发 返回check函数-->
<form id="testform" onSubmit="return check();">
<!--定义两个输入框 类型是password 会用星号来掩盖你输入的值-->
密码:<input type=password name="pass1" id="pass1" /><br />
确定密码:<input type=password name="pass2" id="pass2" /><br />
<!--定义输入框 类型是email地址类型 -->
Email:<input type=email name="email" id="email" /><br />
<!--定义输入框 类型提交按钮-->
<input type="submit" />
</head>
<body>
</body>
</html>
figure元素
<html>
<head>
</head>
<body>
<!--figure 元素也是一种元素的组合 带有可选标题 内容可以是图片 统计图片和代码示例-->
<figure>
<img src="1111.jpg" alt="图片">
</figure>
</body>
</html>
figcaption元素
<html>
<head>
</head>
<body>
<!--figure 元素也是一种元素的组合 带有可选标题 内容可以是图片 统计图片和代码示例-->
<figure>
<img src="1111.jpg" alt="图片">
<!--figcaption 元素是figure元素的标题 必须写在figure元素里面-->
<figcaption>图片</figcaption>
</figure>
</body>
</html>
1月6号学习html5(第64天的学习)
猜你喜欢
转载自xjwolaile.iteye.com/blog/1764074
今日推荐
周排行