表单与内联框架

表单

<form action="form.php" method="get"> </form>

action:数据传输接收的页面,method:传输方式get/post

get:数据以”?查询字符串,键值对方式发送到后端

<label for=""></label>

实现点击用户名,焦点跳转到对应的输入框 for对应input的id值

<input type="text" id="name" placeholder="用户名不能为空">

placeholder 输入框中的提示符

<input type="password">

password属性:输入内容加密,可以用js代码实现明文与密文切换

<input type="radio" name="" value="" id="" checked>

radio:单选按钮,name值必须一致,value为向后台传输的数据

checked默认选项

<input type="checkbox" name="value[]" value="" id="">

checkbox:复选框,name值加[]代表数组

<select name="edu" id="">
    <option value="0" selected disabled>选择学历</option>
    <option value="1" >中专</option>
    <option value="2">大专</option>
    <option value="3">本科</option>
</select>

select+option 下拉列表格式

selected是预选框 disabled禁止选中

表单图片示例

表单图片

原代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>form表单</h2>
        <form action="form.php" method="get">
            <div>
                <!-- 用户名 -->
                <!-- <label for=""></label> 实现点击用户名,焦点跳转到对应的输入框  for对应input的id值-->
                <!-- placeholder 输入框中的提示符 也可以用value默认值,不美观-->
                <label for="name">用户名:</label>
                <input type="text" id="name" placeholder="用户名不能为空">
            </div>
            <div>
                <!-- 密码 -->
                <!-- password属性:输入内容加密,可以用js代码实现明文与密文切换 -->
                <label for="pwd">密码:</label>
                <input type="password" id="pwd" placeholder="密码不能为空">
                <button>查看密码</button>
            </div>
            <div>
                <!-- 性别单选按钮 -->
                <!-- radio:单选框,name值必须是一致的,value值是像后台传输的数据 -->
                <!-- checked默认选项 -->
                <label for="nan">性别:</label>
                <input type="radio" name="sex" value="nan" id="nan" checked><label for="nan">男</label>
                <input type="radio" name="sex" value="nv" id="nv"><label for="nv">女</label>
            </div>
            <div>
                <!-- 复选框 -->
                <!-- checkbox:复选框,name值加[]代表数组 -->
                <label for="">城市:</label>
                <input type="checkbox" name="citys[]" value="beijing" id="beijing"><label for="beijing">北京</label>   
                <input type="checkbox" name="citys[]" value="shanghai" id="shanghai"><label for="shanghai">上海</label>   
                <input type="checkbox" name="citys[]" value="hebei" id="hebei"><label for="hebei">河北</label>   
                <input type="checkbox" name="citys[]" value="tianjin" id="tianjin"><label for="tianjin">天津</label>   
            </div>
            <div>
                <!-- 下拉列表 -->
                <!-- select+option 下拉列表格式 -->
                <!-- selected是预选框 disabled禁止选中-->
                <label for="">学历:</label>
                <select name="edu" id="">
                    <option value="0" selected disabled>选择学历</option>
                    <option value="1" >中专</option>
                    <option value="2">大专</option>
                    <option value="3">本科</option>
                </select>
            </div>
            <div>
                <button>提交</button>
            </div>
        </form>
    </div>
</body>
</html>

内联框架

<a href="../0704/demo1.html" target="content"></a>
<iframe src="" frameborder="0" name="content"></iframe>

a标签的target属性对应iframe标签的name属性,为本地跳转

css样式
/* 居中对齐 */
text-align: center;
/* 去除无序列表的点 */
list-style: none;

内联框架示例

内联框架

原代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top{
            width: 1000px;
            height: 100px;
            /* border: 1px solid red; */
            /* 居中对齐 */
            text-align: center;
        }
        ul{
            /* 去除无序列表的点 */
            list-style: none;
            /* border: 1px solid black; */
            text-align: center;
            display: flex;
        }
        li{
            border: 1px solid gray;
            width: 20%;
        }
        a{
            width: 200px;
            height: 30px;
            display: flex;
            margin-top: 10%;
            margin-left: 30%;
        }
        iframe{
            width: 1000px;
            height: 500px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <!-- 导航 -->
    <div class="top">
        <ul>
            <li><a href="../0704/demo1.html" target="content">元素属性</a></li>
            <li><a href="../0704/demo2.html" target="content">布局元素</a></li>
            <li><a href="../0704/demo3.html" target="content">链接与列表</a></li>
            <li><a href="../0704/demo4.html" target="content">表格元素</a></li>
            <li><a href="https://j.map.baidu.com/aa/5NJ" target="content">地图</a></li>
        </ul>
    </div>
    <!-- 内容 -->
    <div class="bottom">
        <iframe src="" frameborder="0" name="content"></iframe>
    </div>
</body>
</html>