<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>
<input type="text" name="login" value="不能为空"><br>
<input type="submit" value="提交"><br>
1.单行文本： <input type="text" name="login" value="不能为空"><br>
2.密码字段： <input type="password" name="pwd "><br>
3.单选按钮： <input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">女<pre>(多个name值必须相同)</pre><br>
4.复选框： <input type="checkbox" name="language" value="php" checked>php <input type="checkbox" name="language" value="java">java<pre>(多个name值必须相同)</pre><br>
5.自定义按钮： <input type="button" value="点击"><br>
6.提交按钮: <input type="submit" name="" value="提交"><br>
7.重置按钮： <input type="reset" name="重置"><br>
8.文件上传： <form name="from1" action="fun.php" method="post" enctype="multipart/form-data"> <input type="file" multiple> <pre>（multiple是允许批量上传）, enctype="multipart/form-data":禁止将我们的编码文件进行传送</pre> </form><br>
9.图像按钮: <input type="image" src="图片的url" alt="图片说明"><pre>(必须放在form标签才有提交成功)</pre><br>
10.隐藏字段： <input type="hidden" name="country" value="china"> <pre>（常储存默认值或由脚本处理的数据）,hidden 属性规定对元素进行隐藏。隐藏的元素不会被显示。如果使用该属性，则会隐藏元素。可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。然后，可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。</pre><br>
<h2>下拉框与分组：</h2> <select name="hefei"> <option value="town" selected>合肥市</option> <option value="changfeng">长丰县</option> <option value="fexi">肥西县</option> <option value="feidong">肥东县</option> <option value="caohu">草和市</option>
</select><br>
<h2>下拉框与分组二：</h2> <select name="hefei"> <optgroup label="合肥市"> <option value="1" selected>包河区</option> <option value="2">路演区</option> <option value="3">瑶海区</option> <option value="4">需上区</option> <optgroup> <optgroup label="县市"> <option value="changfeng">长丰县</option> <option value="fexi">肥西县</option> <option value="feidong">肥东县</option> <option value="caohu">草和县</option>
</optgroup> </select><pre>(optgroup选项分组标签 lable：分组标签名称)</pre><br>
<h2>文本域：</h2><br> <textarea name="message" cols="30" rows="10" style="resize: both;"></textarea><br> <pre> 属性: 1.cols:每行最多少个字符 2.rows：可以显示多少行 3.resize：是否允许更改尺寸 4.both：默认值，允许 5.none：不允许调整尺寸 6.horizontal：仅允许水平调整宽度 7.vertical：仅允许垂直调整高度 </pre><br>
<h2>label表单元素描述标签：</h2> <pre> label标签用于对控制内容进行说明：如用户名，密码等<br>
1.格式一：<br> 优点：label与input同级，适合表格布局 缺点：input必须要有id属性与label的for属性关联 </pre><br> <label for="name">用户名：</label> <input type="text" name="username" id="name" value="6-10个字符"><br>
格式二：<br> <label 用户名:<input type="text" name="username" value="6-10个字符"></label>
<h2>fieldset表单元素分组标签：</h2> <fieldset> <legend>基本信息</legend> <div> <label for="name">用户名称：</label> <input type= "text" name="name" id= "name"> </div> <div> <label for="pwd">用户密码：</label> <input type="password" name="pwd" id="pwd"> </div> <div> <label for="email">电子邮件:</label> <input type="email" name"email" id="email"> </div> </fieldset><br>
<h2>HTML 5新增表单属性实例一</h2> <pre>1、placeholder: 设置提示信息或默认值</pre> <input type="text" name="login" placeholder="用户名不能为空"><br>
<pre>2、autotocus:自动获取输入集点</pre> <input type="text" name="name" autofocus><br><pre>设置自动获取输入集点后打开网页鼠标自动获取位置</pre>
<pre>3、required:设置字段</pre> <input type="text" name="name" placeholder="用户名不能为空" required=""><br>
<h2>HTML 5新增表单属性实例二</h2> <pre> 4、pattern:正则模式验证，更精准的控制用户输入 序号 模式 描述 实例 1 \[\] 限定范围 \[0-9\]、\[a-z\]、\[A-Z\]、\[0-9a-zA-Z\] 2 {} 限定数量 {3} 必须为3个{3-6}3个到6个之间，(3,)至少3个 3 ^ 限制开头 ^php\[5-7\]{a-z}{2,5} php开头跟一个数字再跟2到5个字母 4 $ 限制结尾 \[O-9\]{2}\[a-z\]{3}abc$ </pre> <input type="text" name="country" pattern="\[A-Z\]{3}" title="三字母国家代码"><br> <input type="submit" value="提交" />
<h2>HTML 5新增表单属性实例三</h2> <pre> 5、list: list的属性值与input的id值必须一 致，实现datalist列表与控件绑定 </pre> <label for="search">搜索: </label> <input type="text" id="search" list="keyword"> <datalist id="keyword"> <option value="html">html</option> <option value="css">css</option> <option value="javascript">javascript</option> <option value="php">php</option> <option value="python" >python</option> </datalist><br>
<h2>HTML 5新增表单属性实例三</h2> <pre> 6、width和height:只需要设置其中一个即可，另一个等比例缩放</pre> <input type="image" src="timg.peg" width="150" alt="提交">
<pre> 7、min、max和step:区间5步长设置 </pre> 工资:<input type="number" min="1000" max="15000" step="500" ><br>
<pre>8.novalidate:提交时放弃数据验证</pre> <form action="addEdit.php" method="post" novalidate><br>
<h2>HTML5新增表单类型实例一</h2> <pre>1. number:仅限数值型数据</pre> <input type="number" name="age" min="18" max="120" step="5">岁<br> <pre>
<pre>2. date:仅限日期型数据</pre> <input type="date" min="2014-10-10" max="2018-10-20" value="2017-03-08"><br>
<pre>3. time: 仅限时间型数据，仅允许设置小时区间，分钟供参考</pre> <input type="time" name="time" min="10:10" max="14:20" value="10:20"><br>
<h2>HTML 5新增表单类型实例二</h2> <pre>4、email: 仅限电邮地址</pre> <input type="email" name="email" [placeholder="yourName@mail.com](mailto:placeholder=%22yourName@mail.com)"><br>
<pre>5、search: 有内容时，会显示一个取消图标</pre> <input type="search" placeholder="请输出查询关键字"><br>
<pre>6、url:仅限以http:/或者htps:/开头的URL地址</pre> <input type="url" name="url" placeholder="请输入以http/https起始的完整网址" size="40"><br> <input type="submit" value="提交" />
<h2>HTML 5新增表单类型实例三</h2> <pre>7、color: 通过系统调色板来获取颜色，返回16进制颜色值</pre> <form action=""> <input type="color" name="color" id="color"> <input type="button" value="获取颜色值" id="btn"> <input type="text" name="color\_value" id="color\_value" > </form> <script> document.getElementByld('btn').οnclick=function(){ document.getElementById('color_value').value=document.getElementByld('color').value;
} </script> <br>
<h2>video视频按钮</h2> <video src="demp.mp4" width="400" controls="" autoplay="" poster="poster.jpg"></video> <pre>controls:显示播放控制面板，autoplay：设置自动播放视频,poster:打开视频后会在视频的封面上设置一个视频的海报</pre><br>
<h2>audio音乐播放按钮</h2> <audio src="vfd.mp3" controls autoplay="" muted="" loop=""></audio> <pre>controls:显示播放控制面板， autoplay：设置自动播放,muted:设置自动静音, loop:设置循环播放</pre>
</body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
