form表单iframe、a锚点

form表单

form的标签属性：

1.action="/login" : 表示设置表单提交数据时，后台接收的url（接口）,服务器地址

2.method="get"： 提交表单数据的方式（请求后台接口的方法）；get,post.

下来详细区别GET,POST。

<from action="" method="get">获取数据地址栏可见

<from action="" method="post">提交数据隐藏 可提交大量数据

表单要上传文件，则必须是POST请求。enctype="multipart/form-data"

name="myform"： 表单的名称

label关联标签，for里面的内容要与后面input关联的id属性要一致，不然会标红。

<!--action服务器的地址 method提交方式（）-->
<form action="" method="">
    <!--type属性-->
    <!--label关联标签-->
    <label for="userName">用户名</label>
    <!--autofocus 自动获取光标-->
    <input autofocus value="杨枝甘露" placeholder="请输入用户名" type="text"  id="userName"> </input>
    <label for="password">密码</label>
    <input type="password" id="password"/>
</form>

 

1.input标签的type标签属性：

type: 指定一个值，表示是什么类型的表单元素。

text: 单行文本输入框

password: 密码输入框

radio: 单选

checkbox: 多选

submit: 提交按钮

reset: 重置按钮

file: 文件上传

 

-------------------html5新增的类型，input其他属性-----------------

name: 表单域的名称，提交传递的值，上传至后台网址上

placeholder: 提示信息

value: 默认值，或提交到后台的值，如果是submit,reset的类型时，value就是按钮的名称。

autofocus 自动获取光标

color: 颜色

datatime: 日期时间

week: 周

month： 月

disabled 禁用

maxlength 最大长度

但凡有/没有，是/不是 boolean值，可写可不写后面的值，例如disabled ,checked。

 

2.单选框： radio

每一个标签的name属性的值，必须是相同。

checked="checked"：设置单选框默认选中项。

<form action="" method="">
    <!--单选-->
    <!--服务器知道的是valve里面的值,valve控制input传递的值，name属性选中这个-->
    性别<label for="man">男</label><input type="radio" id="man" name="sex" value="man" checked>
    性别<label for="women">女</label><input type="radio" id="women" name="sex" value="woman">
</form>

3.多选框： checkbox

name: 可以是同一个名字，也可以不同。一般 同名。

value: 提交到后台的值，控制input传递的值；

checked: 设置为默认选中。

配合<label></label>,提升用户体验。

label关联标签，for里面的内容要与后面input关联的id属性要一致，不然会标红。

 

<!--action服务器的地址 method提交方式（）-->
<form action="" method="">
    <!--多选-->
    <h2>爱好</h2>
    <label for="basketball">蓝球</label>
    <!--checked 默认选中-->
    <input type="checkbox" id="basketball" value="打篮球" checked>
    <label for="study">学习</label>
    <input type="checkbox" id="study" value="学习" >
    <label for="dance">跳舞</label>
    <input type="checkbox" id="dance" value="跳舞" >
</form>

 

 

4.列表与下拉列表：

value: 提交到后台的值；

<option>之间的文本，就是给用户看的。下拉项的文本

selected="selected"： 设置为默认选中。

当是列表时：

size="4"： 表示同时显示的option的数量；

multiple="multiple"： 允许用户按ctrl 不放，进行多项选择。

<!--下拉列表-->
<!--value最好选用数字，数字是地区对应id,慎用中文-->
<label for="address">地址</label>
<select name="address" id="address">
    <option value="1" selected>高新区</option>
    <option value="2">成华区</option>
    <option value="3">锦江区</option>
    <option value="4">温江区</option>
</select>

5.多行文本输入框（多行文本域）

rows: 行数，控制高度 cols: 列数，控制宽度

一般还是css改变行列

<!--文本域-->
<!--一般还是css改变行列-->
<h2>填写</h2>
<textarea name="wenben" id="wenben" cols="30" rows="10"></textarea>

6.button标签：

type="button, reset,submit"

<button type="button">注册</button> --> AJAX来实现后台请求

<!--button在form表单标签有默认提交的功能，但是在form外就是一个单纯的按钮-->
<button>提交</button>
<input type="button" value="我是按钮"><!--单纯的按钮-->
<input type="submit" value="我是提交按钮"><!--可提交-->

单纯按钮不可响应，提交按钮可在地址处响应：

iframe 

现在用得少了，因为存在跨域的问题。

iframe 网页子窗口 iframe如何和a标签建立联系？

1.iframe设置name属性 2.a标签设置target属性

<h1>XXX管理</h1>
    <nav>
        <ul>
            <!--实现iframe页面跳转需要使用过a标签-->
            <li><a href="https://www.baidu.com" target="myframe">百度</a></li>
            <li><a href="d2_1form.html" target="myframe">d2_1form</a></li>
            <li><a href="">c页面</a></li>
        </ul>
    </nav>
    <!--iframe 网页子窗口 iframe如何和a标签建立联系-->
    <!--1.iframe设置name属性  2.a标签设置target属性-->
    <iframe src="" name="myframe" frameborder="1"></iframe>

点击百度

点击d2_1form

a标签的锚点

通过id的设置定位

<div id="runtop"></div>
<!--通过能够实现一个常见的返回顶部的功能。-->
<a href="#runtop">返回顶部</a>