html5---（2）

---

前言

一、页面结构

二、iframe内联框架

基本结构：

*******************************************************
<iframe src="path" name="mainname"></iframe>

<!--src:引用页面地址，即嵌入的网页，name：框架标识名-->

*******************************************************
也可以不写path，通过a标签实现超链接跳转到iframe的name。
如：
<iframe src=""  name="hello" frameborder="0" width="100px" height="100px"></frame>

<a href="https://www.baidu.com" target="hello">点击跳转到百度</a>

<!--此时点击页面的 点击跳转到百度 会在更新当前标签，页面内有百度页面-->

三、表单

元素：文本框，单选框，多选框，按钮,下拉框

1.表单元素格式：

2.input标签

1)表单基本结构：

***********************基本结构***************************
<!--
method:规定如何发送表单数据：
   常用post（比较安全，传输大文件-get不行，右键-审查元素-network-产生的请求-header内最后-from data含有表单信息）,
   get(在url中看到提交的信息，不安全，高效）；
action:向何处发送表单
-->

<form method="post" action="result.html">
  <p> 名字： <input name="name" type="text"></p>
  <p> 密码： <input name="password" type="password"></p>
  <p>
     <input type="submit" name="Button" value="提交"/>
     <input type="reset" name="Reset" value="重填"/>
  </p>
</form>

2)扩展：（单选框，多选框，按钮，文件域）

************************扩展*****************************
<!--如果要增加框的属性，即在<input....内添加如：value="" maxlength=""-->

******单选框******
<!--如果写单选radio，必写value,和name-->
如：
<!--必须写name，且name值一样，表示在一个组内，要不写两个radio可以同时点-->

<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女

******多选框******
<!--多选checkbox-->
如：
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">敲代码
</p>

******按钮*******
<!--按钮
input type="button" 普通按钮
input type="image"  图像按钮
input type="submit" 提交按钮
input type="reset"  重置
-->
<p>按钮：
     <input type="button" name="btn1" value="点击变长">
     <input type="image" src="path">
     <input type="submit">
     <input type="reset" value="清空表单">
</P>

*******文件域--选择文件******
<!--input type="file" name="files"-->
<p>
    <input type="file" name="files">
    <!-- <input type="button" value="上传" name="upload"> -->
</p>
*****************验证*******************
******邮箱验证******
<input type="email" name="email">
******url验证******
<input type="url" name="url">
******数字验证******
<!--step表示数量step个step个加,最小减到0，最大加到100-->
<input type="number" name="num" max="100" min="0" step="1">

**************滑块功能********************
<input type="range" min="0" max="100">
如：
<p>音量:
     <input type="range" name="voice" min="0" max="100" step="2">
</p>
*************搜索功能*********************
<input type="search" name="search">
<!--框上最后有×，可以直接删掉框中要搜索的内容-->

3.下拉框select

<p>下拉框：
     <select name="列表的名字">
         <option value="选项的值">中国</option>
         <option value="选项的值">美国</option>
         <option value="选项的值">瑞士</option>
     </select>
</p>

4.文本域textarea

<p>反馈：
     <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>

5.表单的应用

*************隐藏域hidden****************
<input type="text" name="username" value="admin" hidden>
*************只读readonly*****************
<input type="text" name="username" value="admin" readonly>
*************禁用checked disabled*****************
<input type="radio" value="boy" name="sex" checked disabled/>
*************已选checked*****************
<input type="radio" value="boy" name="sex" checked/>
*************增强鼠标可用性****************
<label for="mark">点击</label>
<input type="text" id="mark">
<!--这时点击 点击 会指向鼠标输入的位置，当把id属性放大其他input标签内，就会指向对应框内-->

6.表单的初级验证

高级验证通过js

********placeholder 提示信息**********
<input type="text" name="username" placeholder="请输入用户名">

********required    非空判断**********
<input type="text" name="username" required>

********pattern     正则表达式********
<input type="text" name="diymail" pattern="">
  <!--常用正则表达式网站：https://www.jb51.net/tools/regexsc.htm-->

---

总结

上一个博文
html5—(1）
之后继续学习css