from表单的基础控件

1.最简单的的一个注册表单结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单</title>
  </head>
  <body>
    <form action="b.html" method="POST">
      <label for="username">账号:</label>
      <input
        type="text"
        id="username"
        name="username"
        placeholder="至少6位"
        autofocus
        required
      />
      <label for="email">邮箱:</label>
      <input
        type="email"
        id="email"
        name="email"
        placeholder="admin@focus.com"
        required
      />
      <label for="pwd1">密码:</label>
      <input
        type="password"
        id="pwd1"
        name="pwd1"
        placeholder="至少输入6位，并且包含字母和数字"
        required
      />
      <label for="pwd2">确认:</label>
      <input
        type="password"
        id="pwd2"
        name="pwd2"
        placeholder="****"
        required
      />
      <button type="submit">提交</button>
    </form>
  </body>
</html>

2.单选框和复选框

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单选按钮和复选框</title>
  </head>
  <body>
    <form action="b.html" method="GET">
      <!-- 单选框 -->
      <label for="male">性别：</label>
      <div>
        <input type="radio" name="gender" id="male" checked /><label for="male"
          >男</label
        >
        <input type="radio" name="gender" id="female" /><label for="female"
          >女</label
        >
        <input type="radio" name="gender" id="secret" /><label for="secret"
          >保密</label
        >
      </div>
      <!-- 复选框 -->
      <label for="">兴趣：</label>
      <div>
        <input type="checkbox" name="hobby[]" id="game" /><label for="game"
          >游戏</label
        >
        <input type="checkbox" name="hobby[]" id="write" /><label for="write"
          >写字</label
        >
        <input type="checkbox" name="hobby[]" id="read" checked /><label
          for="read"
          >阅读</label
        >
        <input type="checkbox" name="hobby[]" id="car" /><label for="car"
          >开车</label
        >
      </div>
      <button type="submit">提交</button>
    </form>
  </body>
</html>

3.下拉列表和下拉多选列表

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>下拉选择</title>
  </head>
  <body>
    <form action="b.html" method="GET">
      <!-- 单选框 -->
      <!-- <label for="edu">学历：</label> -->
      <!-- <div> -->
      <!-- 单选下拉列表 -->
      <!-- <select name="edu" id="edu">
        <option value="1">小学</option>
        <option value="2">初中</option>
        <option value="3">高中</option>
        <option value="4">专科</option>
        <option value="5" selected>本科</option>
      </select> -->
      <!-- </div> -->
      <!-- 多选列表 -->
      <label for="hobby">兴趣爱好：</label>
      <select name="hobby" id="hobby" size="6" multiple>
        <option value="1">look</option>
        <option value="2">write</option>
        <option value="3" selected>read</option>
        <option value="4">run</option>
        <option value="5" selected>go</option>
      </select>
      <button type="submit">提交</button>
    </form>
  </body>
</html>

4.文件上传

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文件上传</title>
  </head>
  <body>
    <!-- post提交 form-data二进制流传输 -->
    <form action="b.html" method="POST" enctype="multipart/form-data">
      <input type="hidden" name="MAX_FILE_SIZE" value="800" />
      <input type="file" name="head" id="head" /><label for="head">头像</label>
      <button type="submit">提交</button>
    </form>
  </body>
</html>

5.文本域

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本域</title>
  </head>
  <body>
    <form action="b.html" method="POST">
      <textarea
        name="desc"
        id="desc"
        cols="30"
        rows="10"
        placeholder="请输入..."
      ></textarea>
      <button type="submit">提交</button>
    </form>
  </body>
</html>

6.控件的 from 属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>控件的form属性</title>
  </head>
  <body>
    <form id="register"></form>
    <!-- form下的控件 不在from标签区域内，也可以实现from元素的填充 -->
    <input type="text" name="" id="" form="register" />
    <button form="register" formaction="b.html" formmethod="GET">提交</button>
  </body>
</html>

7.iframe 案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>iframe案例</title>
  </head>
  <body>
    <header>xx后台</header>
    <aside>
      <a href="http://www.baidu.com" target="show">百度</a>
      <a href="http://www.qq.com" target="show">qq</a>
      <a href="http://www.taobao.com" target="show">taobao</a>
      <a href="http://www.360.com" target="show">360</a>
    </aside>
    <main>
      <iframe src="" name="show" width="600" height="500"></iframe>
    </main>
  </body>
</html>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：内联框架有意思

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

Markdown使用语法实例1

2020-09-29 13:12:31