HTML+CSS-Day03

1. 表单标签

- `<form></form>` 表单标签是 HTML 表单用于搜集不同类型的用户输入

- 双标签，一般情况下不能单独使用，需要在 form 元素中加入 input 等标签共同使用

- 常用属性

- name属性主要是对这个form进行标记

- method=”get/post”， get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限。get安全性非常低，post安全性较高。但是执行效率get安全性非常低，post安全性较高。但是执行效率却比post方法好。

- action，处理表单提交的 URL（可以为node中的路由接口地址）。

- enctype属性，当method属性值为post时，enctype 就是将表单的内容提交给服务器的媒体类型。application/x-www-form-urlencoded：未指定属性时的默认值。

<form action="提交地址" method="提交⽅式">n个需求的表单内容 ……</form>

2. input 标签及控件

- `<input/>`元素是最重要的表单元素。它有很多形态，根据不同的 type 属性。

- input 标签是单标签，主要依靠控件，input 的 type 类型就是用于书写控件的属性。它的控件有很多种类，从而达到我们要的需求。

- input 标签是内联元素，但属于特殊的内联元素，可以定义宽度高度，

单不自占一行

<input type="控件名称" >

（1）文本框

- `type="text"`定义单行文本输入域，用户可在其中输入文本

- `value=""`代表初始值，用户输入后可通过事件获取该属性的值

- `placeholder="xxx"` 占位符，可用来作为对用户的提示文字

- `name=""`可与服务器交互数据的元素标示，可以在服务器端根据其 name 取得元素提交的值

- `maxlength` 属性配合使用，可创建合法值范围，直接写数字

<input type="text" placeholder="输⼊⽤户名" name="username" maxlength="10" />

（2）密码框

- `type="password"`定义密码输入域，用户在该域中输入的字符不直接显示，而是显示星号或实心圆。

- 具有`value、placeholder、name`属性

示例:验证用户名是否存在  50%

(1)创建新网页02_验证用户名.html (2)添加用户名 添加验证用户是否存在按钮

用户名[      ]      {验证}       #如果用户输入tom      己存在  <span id="msg"></span>      #如果用户输入其它名称   欢迎使用

(3)按钮和哪个标签      <input id="btn" type="button" value="验证">

操作网页通用套路(javascript 语言完成任务) (1)获取标签(元素)     1.1:在网页中找一个id等于btn标签 (2)为标签元素绑定(操作)事件  click点击操作(点击事件) on 修改词    btn.onclick = function(){      //(3)修改数据或者计算   #用户输入字母在value值保存      //(4)显示结果      if(input.value=="tom"){    //11:35 完成任务         msg.innerHTML = "己存在";      }else{        msg.innerHTML = "欢迎使用";      }          } #为按钮绑定事件点击执行函数

<input type="password" placeholder="输⼊密码" name="pwd" />

（3）单选框

- `type="radio"`定义单选框，用户只能在多个选项中选择其中一个。

- 单选框有一个很重要的属性，name 属性。name 属性相同则可以让单选框变为一组，从而达到单选的目的 name="值"，值相同的单选框，都会被作为一组单选框，一组单选框的选项只能选择其一。

- `checked` 属性代笔表默认被选中的,可以不用写值 checked  属性代笔表默认被选中的,可以不⽤写值

<input type="radio" name="sex" checked />男 <input type="radio" name="sex" />⼥ 

（4）复选框

- `type="checkbox"`定义复选框，用户可以在多个选项中选择一个或多个。

- 复选框有一个很重要的属性，name 属性。name 属性相同则可以让复选框变为一组，从而达到记录复选内容的目的。

- `checked` 属性代笔表默认被选中的,可以不用写值，多选可以有多个默认被选中的项

<input type="checkbox" name="eat" checked />吃⾯ 

<input type="checkbox" name="eat" />吃饭 

<input type="checkbox" name="eat" checked />吃⼟ 

（5）按钮

- `type="submit"`定义提交按钮，提交按钮会把表单数据发送到服务器，数据会被发送到在 from 表单的 action 属性中规定的 URL。不定义文字内容，会显示“提交”

- `type="reset"`重制表单里所有的内容会被清空，默认按钮文字为重制

- `type="button"`普通按钮没有功能，需要 value 属性指定按钮文字

<input type="submit" />

<input type="reset" />

<input type="button" value="普通按钮" />

（6）文件上传

- 使用 `type="file"` 的`<input>` 元素使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上

- `multiple`属性表示允许选择多个文件。 当这个属性存在在标签中，则可以同时上传多个文件。

<input type="file" />

<!-- 多⽂件上传 --> 

<input type="file" multiple />

（7）html5 新增 type 属性

- `type="number"`用于输入数字的字段，其中 min 设定允许的最小值；max 设定允许的最大值；value 规定默认值；还有 step 可规定合法数字间隔；

- `type="email"`专用于 email 的输入，省去了正则表达式的编写

- `type="color"`使用 color 属性能直接调用系统的颜色调节窗口，默然为黑色

- `type="range"`定义用于精确值不重要的输入数字的控件；min 属性指定最小值限制，max 属性指定最大值限制，step 属性规定合法数字间隔，value 属性规定默认值，

- `type="date"`可用来选择或输入日期，包括（年/月/日）不包括时间

<input type="number" min="1" max="5">

<input type="email">

<input type="color" id="color"﹥ 

3. 标记标签

- `<label></label>` 标记标签标签不会向用户呈现任何特殊效果。双标签，内联元素，不自占一行

- 它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。label 标签的"for" 属性可把 label 绑定到另外一个元素。把 "for" 属性的值设置为相关元素的 id 属性的值。

<label>⽤户名：</label><input type="text" placeholder="请输⼊⽤户名" />

<input type="checkbox" id="mianmi" /><label for="mianmi">30天免密码登录</label>

4.菜单标签

- `<select></select>` 下拉菜单标签,双标签，但不能单独存在，只能包裹`<option></option>` 标签是选项标签

- `<option></option>`的`value`属性是可以获取并且得到该下拉菜单用户选择的是哪一项

- `multiple`属性代表该下拉菜单可以多选。

<select name="cd" id="city" multiple>

<option value="0">请选择</option>

<option value="1">北京</option>

<option value="2">天津</option>

<option value="3">⼴州</option>

<option value="4">重庆</option>

</select>

5.文本域

- `<textarea></textarea>`文本域标签具有滚动条的多行文本输入控件，与单行文本框 text 控件不同

- 它不能通过 maxlength 属性来限制字数，为此必须寻求其他方法来加以限制以达到预设的需求。

- 文本域禁止缩放的样式`resize:none;`

<textarea name="" cols="30" rows="10" style="resize:none;"></textarea>

<h1>欢迎注册</h1> <table> <tr> <td height="40"><span>*</span>证件类型</td> <td> <input type="radio" name="zhengming" value="0" />身份证  <input type="radio" name="zhengming" value="1" />银⾏卡  </td> <td></td> </tr> <tr> <td height="40"><span>*</span>身份证/卡号</td> <td> <input type="text" /> </td> <td></td> </tr> <tr> <td height="40"><span>*</span>登录密码</td> <td> <input type="password" /> </td> <td></td> </tr> <tr> <td height="40"><span>*</span>确认密码</td> <td> <input type="password" /> </td> <td></td> </tr> <tr> <td height="40"><span>*</span>动态验证码</td> <td> <input type="text" /> </td> <td> <button>点击发送动态验证码</button> </td> </tr> <tr> <td height="40" colspan="3" style="text-align: center;"> <input type="checkbox" id="xuan" /> <label for="xuan">我已阅读并同意</label> <a href="#">《商城⽤户注册协议》</a> </td> </tr> <tr> <td height="40" colspan="3" style="text-align: center;"> <button style="width: 200px;">⽴即注册</button> </td> </tr> </table>

AJAX 无法实现替换标签

八、iframe

- `<iframe></iframe>`标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，

且所有主流浏览器都支持 iframe 标签

- 简单用法的属性

  - `src` iframe 页面地址，有同域跨域之分

  - `height` iframe 高度

  - `width` iframe 宽度

  - `name` iframe 命名

  - `scrolling`用来设置框架是否需要滚动条，取值可以是`yes,no,auto`

    - `auto`在需要的情况下出现滚动条（默认值）

    - `yes`始终显示滚动条（即使不需要）

    - `no`从不显示滚动条（即使需要）

- 优势和劣势

  - 程序调入静态页面比较方便;

  - iframe 有不好之处：样式/脚本需要额外链入，会增加请求

  - 有同步和异步之分

  - 样式不好控制

<iframe name="Iframe1" src="https://www.taobao.com"  

width="100"  height="200"  

scrolling="yes">

  您的浏览器不⽀持嵌⼊式框架，或者当前配置为不显示嵌⼊式框架。 

</iframe>