<!--html新增input 类型
search(搜索)
email(邮件搜索框)
url(url地址输入框)
number(数字输入框)
range(滑动条)
date(日期选择)
month(月份选择)
week(周选择)
time(时间选择)
datetime(包含时区)
color(颜色选择)
datalist
-->
<!doctype html>
<html lang="zh-cn">
<head>
<title>input 类型</title>
<meta charset="utf-8">
</head>
<body>
<label>请填写一个浏览器的名字</label>
<input type="text" list="browsers"><!--将input中的list属性值和下边的datalist标签中的id值设置一样就可以实现-->
<datalist id="browsers">
<option>谷歌</option>
<option>火狐</option>
<option>uc</option>
<option>Opera</option>
</datalist>
<!--<form action="#" method="get" novalidate>这里的novalidate表示不使用表单验证功能就可以进入相应的页面
<input type="text" name="username">
加密:<keygen name="secrity"> 加密
<input type="submit">
</form>
<p>
<form οninput="x.value=a.value">
选择一个数字:
<input type="range" name="a" value="0">
<output name="x">0</output>
</form>
此段代码的含义是改变进度条的进度从而实现在output显示进度条的进度-->
/<!--表单验证：表单验证是指在用户提交表单之前，确保用户输入的数据是合法的。：1、输入类型 2、必填字段 3、字符范围 3、数值范围-->
<form action="video.html" method="post">
<div>数字:<input type="number" required step="10"></div><!--step 为设置步长每次点击会跳的间距为值的长度 min="5" max="10"required属性是boolean属性 表单提交时输入域不能为空。所有的input元素属性都有required属性但是不包括submit button和reset-->
<!--<div>邮箱:<input type="email" required></div>
<div>网址:<input type="url"></div>-->
<div>请输入密码:<input type="password" minlength="4" maxlength="10" required></div>
<div>送货日期:<input type="date" min="2020-01-01" max="2020-01-10"></div>
<input type="text" pattern="[0-4]{3}" formnovalidate><!--正则表达式 在0-4之间的数必须出现三次-->
<div><input type="submit"></div>
</form>
<form >
<input type="text" placeholder="请输入姓名"><!--为文本框设置默认值，用户输入文本时自动隐藏 当用户清除文本框时候会自动再次显示 这个属性用于text search url email number 以及password-->
<input type="text" autofocus><!--自动获取焦点 当浏览器加载完毕时此文本框会自动获取焦点。用于text search url tel email number password以及日期时间控件。 《注意一个页面只有一个autofocus如果有多个则第一个有效》-->
<input type="submit">
</form>
<form autocomplete="on"><!--自动补全功能 曾经输入过内容时 控件就会记住 下册再次输入时会自动以列表的形式产生-->
<input type="text" placeholder="姓名" name="username">
<input type="number" placeholder="账号" name="cardid">
<select multiple> <!-- 按住ctrl键可以对元素进行多选-->
<option>12</option>
<option>34</option>
<option>56</option>
<option>78</option>
<option>09</option>
</select>
<input type="submit">
</form>
<p>
<form id="for">
<input placeholder="请输入邮件地址" type="email" list="contacts" multiple><!--这里可以进行多选 当选中一个之后输入一个分号还可以继续输入-->
<datalist id="contacts">
<option value="helen@qq.com"></option>
<option value="cohen@163.com"></option>
<option value="wdl@152.com"></option>
<option value="wmj@sin.com"></option>
</datalist>
<input type="file" multiple> <!--可以选择多个文件-->
<input type="submit" value="提交">
</form>
<input type="text" placeholder="姓名" name="username" form="for"><!--通过form属性的值与from表单元素中的id值相同从而实现表单外边和里边相关联-->
</body>
</html>
<!--总结:
输入类型的验证:number,email,url;
必填字段验证:required;
字符长度验证:minlength,maxlength;
设置数值范围:min,max;
设置日期和时间范围:min,max;
设置步长:step;
正则表达式:pattern;
禁用表单验证:novalidate,formnovalidate;
form相关属性:
<input type="submit" formaction="success.html" formmethod="post" formtarget="_blank"
formenctype="application/x-www-form-urlencoded"
放在提交按钮时候在提交表单时候会使用。
-->
search(搜索)
email(邮件搜索框)
url(url地址输入框)
number(数字输入框)
range(滑动条)
date(日期选择)
month(月份选择)
week(周选择)
time(时间选择)
datetime(包含时区)
color(颜色选择)
datalist
-->
<!doctype html>
<html lang="zh-cn">
<head>
<title>input 类型</title>
<meta charset="utf-8">
</head>
<body>
<label>请填写一个浏览器的名字</label>
<input type="text" list="browsers"><!--将input中的list属性值和下边的datalist标签中的id值设置一样就可以实现-->
<datalist id="browsers">
<option>谷歌</option>
<option>火狐</option>
<option>uc</option>
<option>Opera</option>
</datalist>
<!--<form action="#" method="get" novalidate>这里的novalidate表示不使用表单验证功能就可以进入相应的页面
<input type="text" name="username">
加密:<keygen name="secrity"> 加密
<input type="submit">
</form>
<p>
<form οninput="x.value=a.value">
选择一个数字:
<input type="range" name="a" value="0">
<output name="x">0</output>
</form>
此段代码的含义是改变进度条的进度从而实现在output显示进度条的进度-->
/<!--表单验证：表单验证是指在用户提交表单之前，确保用户输入的数据是合法的。：1、输入类型 2、必填字段 3、字符范围 3、数值范围-->
<form action="video.html" method="post">
<div>数字:<input type="number" required step="10"></div><!--step 为设置步长每次点击会跳的间距为值的长度 min="5" max="10"required属性是boolean属性 表单提交时输入域不能为空。所有的input元素属性都有required属性但是不包括submit button和reset-->
<!--<div>邮箱:<input type="email" required></div>
<div>网址:<input type="url"></div>-->
<div>请输入密码:<input type="password" minlength="4" maxlength="10" required></div>
<div>送货日期:<input type="date" min="2020-01-01" max="2020-01-10"></div>
<input type="text" pattern="[0-4]{3}" formnovalidate><!--正则表达式 在0-4之间的数必须出现三次-->
<div><input type="submit"></div>
</form>
<form >
<input type="text" placeholder="请输入姓名"><!--为文本框设置默认值，用户输入文本时自动隐藏 当用户清除文本框时候会自动再次显示 这个属性用于text search url email number 以及password-->
<input type="text" autofocus><!--自动获取焦点 当浏览器加载完毕时此文本框会自动获取焦点。用于text search url tel email number password以及日期时间控件。 《注意一个页面只有一个autofocus如果有多个则第一个有效》-->
<input type="submit">
</form>
<form autocomplete="on"><!--自动补全功能 曾经输入过内容时 控件就会记住 下册再次输入时会自动以列表的形式产生-->
<input type="text" placeholder="姓名" name="username">
<input type="number" placeholder="账号" name="cardid">
<select multiple> <!-- 按住ctrl键可以对元素进行多选-->
<option>12</option>
<option>34</option>
<option>56</option>
<option>78</option>
<option>09</option>
</select>
<input type="submit">
</form>
<p>
<form id="for">
<input placeholder="请输入邮件地址" type="email" list="contacts" multiple><!--这里可以进行多选 当选中一个之后输入一个分号还可以继续输入-->
<datalist id="contacts">
<option value="helen@qq.com"></option>
<option value="cohen@163.com"></option>
<option value="wdl@152.com"></option>
<option value="wmj@sin.com"></option>
</datalist>
<input type="file" multiple> <!--可以选择多个文件-->
<input type="submit" value="提交">
</form>
<input type="text" placeholder="姓名" name="username" form="for"><!--通过form属性的值与from表单元素中的id值相同从而实现表单外边和里边相关联-->
</body>
</html>
<!--总结:
输入类型的验证:number,email,url;
必填字段验证:required;
字符长度验证:minlength,maxlength;
设置数值范围:min,max;
设置日期和时间范围:min,max;
设置步长:step;
正则表达式:pattern;
禁用表单验证:novalidate,formnovalidate;
form相关属性:
<input type="submit" formaction="success.html" formmethod="post" formtarget="_blank"
formenctype="application/x-www-form-urlencoded"
放在提交按钮时候在提交表单时候会使用。
-->
1297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
