表单

参考文档：点击查看

表单用来收集信息，如注册、登录、发送评论反馈、购买商品等

form表单格式：

<!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>
  <!-- action 属性表示表单要提交到后台程序的网址 -->
  <!-- method 属性表单提交的方式，有post和get两种 -->
  <form action="" method="post">
    <!-- 表单内容 -->
  </form>
</body>
</html>

表单控件：包括单行文本框、密码框、单选按钮、label标签、复选框、下拉菜单、多行文本框、三种按钮等。代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>form表单</title>
</head>

<body>

  <!-- action 属性表示表单要提交到后台程序的网址 -->
  <!-- method 属性表单提交的方式，有post和get两种 -->
  <form action="" method="post">
    
    <!-- 文本框 -->
    <!-- placeholder 属性表示提示文本，不是文本框的值 -->
    <!-- value 属性表示文本框的值 -->
    <!-- disabled 属性表示用户不能与元素交互，即锁死状态 -->
    姓名：<input type="text" placeholder="请输入姓名" value="1234" />

    <!-- 换行标签 -->
    <br />

    <!-- 密码框 -->
    密码：<input type="password" placeholder="请输入密码" value="1234" />
    <br />

    <!-- 单选按钮 -->
    <!-- name 值要一样才能互斥，即实现单选功能 -->
    <!-- checked 属性表示默认选择 -->
    性别：<input type="radio" name="gender" value="male" checked />男
    <input type="radio" name="gender" value="female" />女

    <br />

    <!-- label标签 -->
    <!-- 用于文字与单选按钮绑定，点击文字也能勾选单选按钮 -->
    性别：<label><input type="radio" name="gender-2" value="male" checked />男</label>
    <label><input type="radio" name="gender-2" value="female" />女</label>

    <br />

    <!-- 复选框 -->
    <!-- 也可以用label标签 -->
    爱好：<label><input type="checkbox" />跑步</label>
    <label><input type="checkbox" />钓鱼</label>
    <label><input type="checkbox" />爬山</label>

    <br />

    <!-- 下拉菜单 -->
    <!-- option是内部选项 -->
    <!-- selected 默认选项 -->
    选项：<select name="" id="">
      <option value="0" selected disabled>请选择</option>
      <option value="1">选项一</option>
      <option value="2">选项二</option>
      <option value="3">选项三</option>
    </select>

    <br />

    <!-- 多行文本框 -->
    <!-- rows：行数；cols：列数 -->
    简介：<textarea name="" id="" rows="10" cols="30" placeholder="请输入文字"></textarea>

  </form>
</body>
    
</html>

三种按钮：<button>、<submit>、<reset>，都为input标签，只是 type 属性值不同

type 属性值/种类	说明
button	普通按钮，可简写为`<button></button>`
submit	提交按钮
reset	重置按钮

<!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="">
      <!-- button按钮 -->
      <button>点击提交</button>
      <br />
      <!-- submit按钮 -->
      <input type="submit" value="提交" />
      <br>
      <!-- reset按钮 -->
       <input type="reset" value="重置">
    </form>
  </body>
</html>

三种按钮的适用场景

场景	建议
图片形式的按钮	优先考虑`<button></button>按钮`,`<input type="image">`
用form标签提交数据	优先考虑`<button></button>>`和`<input type="submit">`
不想用form标签提交数据	优先考虑 `type` 为`button` 的按钮

HTML5新增控件：更丰富的 input 种类、datalist 控件

input种类

`type`属性值	控件
`color`	颜色选择控件
`data、time`	日期、时间选择控件
`email`	电子邮件输入控件
`file`	文件选择控件
`number`	数字输入控件
`range`	拖拽条
`search`	搜索框
`url`	网址输入控件
查看更多

datalist控件：可以为输入框提供一个备选项，当用户的内容与备选项文字相同时，将会显示智能感应

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>datalist控件</title>
  </head>
  <body>
    <input type="text" list="fruit" />
    <datalist id="fruit">
      <option value="油桃"></option>
      <option value="毛桃"></option>
      <option value="沙杏"></option>
      <option value="苦李"></option>
      <option value="甜李"></option>
      <option value="水蜜桃"></option>
    </datalist>
  </body>
</html>

HTML基础学习（二）

表单