21/5/21HTML5学习02

1、内联框架标签
<iframe src="引用页面地址"name="框架标识名" frameborder="0" width="宽度值"height="高度值"></iframe>
注：frameborder="0"为框架边框属性

2、表单语法
<form action="第一个网页.html" method="post"target="_blank">
  <p>账号：<input type="text"name="zhang"></p>
  <p>密码：<input type="password"name="pwd"></p>
  <p>
    <input type="submit" value="提交">
    <input type="reset"value="重置">
  </p>
</form>
注：
action为表单发送地址，可以是一个网址也可以是一个请求处理地址
method规定如何发送数据常用get、post
    get方式提交：可以在URL（统一资源定位符又叫网页地址）中看到我们提交的信息，不安全，高效
    post方式提交:比较安全，传输大文件

3、表单元素
value="":元素默认初始值，type为radio时必须指定一个值
maxlength="":type为text或password时最长能写几个字符
name=“”：指定表单元素的名称
checked=“”：type为radio或CheckBox时，指定按钮是否被选中
size=“”：指定表单元素的初始宽度，当type为text或password时，表单元素大小以字符为单位，其他类型宽度以像素为单位

4、单选框标签
<form>
  <p>性别：
    <input type="radio"name="sex"value="boy"checked>男
    <input type="radio"name="sex"value="girl">女
  </p>
</form>
注：
input type="radio"单选框标签
radio必须要写value="boy"
name为分组，相同name为一组
checked为默认选项

5、多选框标签 
<form>
<p>工作：
    <input type="checkbox" value="cs"name="1"checked>测试
    <input type="checkbox"value="qd"name="1">前端
    <input type="checkbox"value="kf"name="1">开发
    <input type="checkbox"value="yw"name="1">运维
  </p>
</form>
注：
input type="checkbox"多选框标签
name为分组，相同name为一组
checked为默认选项

6、按钮标签
<form>
<p>
    <input type="button"name="btn"value="按钮">
    <input type="image"src="image/1.jpg">
  </p>
</form>
注：
input type="button"普通按钮
input type="image”图片按钮，需要写src图片地址，点击有提交功能
input type="submit"提交按钮
input type="reset"重置按钮，点击后重置表单内容

7、列表框（下拉框）、文本域，文件域
下拉框标签语法
<form>
  <p>下拉框:
    <select name="工作" >
      <option value="zhg">中国</option>
      <option value="mg" selected>美国</option>
      <option value="rb">日本</option>
    </select>
  </p>
</form>
注：
<select></select>下拉框标签
option value="选项值"
selected默认选项

文本域
<form>
  <p>反馈：
    <textarea name="输入反馈意见" cols="30" rows="10"></textarea>
  </p>
</form>
注：
<textarea></textarea>文本域标签
cols="列数"、rows="行数"

文件域标签：<input type="file">
<form>
  <p>
    <input type="file"name="上传文件">
  </p>
</form>

8、简单验证、滑块、搜索框
简单验证：
邮箱(email)验证：<p>邮箱：<input type="email"name="email"></p>   
网址（url）验证:<p>URL：<input type="URL"name="URL"></p>
数字(number)验证：<p>数字：<input type="number"name="number"  max=“100”min="0" step="10"></p>   <!--step为每次增加或减少的数-->

滑块(range)：<p>滑块:<input type="range"name="滑块" max="100" min="0"></p>

搜索框(search)：<p>搜索框:<input type="search"name="搜索"></p>

9、表单属性
隐藏域：hidden
禁用：disabled
只读：readonly

增强鼠标可用性（使鼠标点击文字也可以编辑）：label标签指向表单对应标签id实现点击文字可以进入表单编辑
  <p>
    <label for="01">搜索框:</label>
    <input type="search"name="搜索" id="01" >
  </p>

10、表单初级验证
placeholder ="提示信息"   提示信息验证
required 非空判断
pattern="正则表达式"  正则表达式验证（百度查找相关功能正则表达式）
  <p>自定义邮箱：
    <input type="text"pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"name="em">
  </p>