html表单

表单
场景：在网页中显示收集用户信息的表单效果，如登录页、注册页
通过创建表单

属性	作用
name	表单名称
action	规定当提交表单时向何处发送表单数据
method	规定提交数据的方式
get获取数据；post发送数据

(1)input系列

input标签而已通过type属性值的不同，展示不同效果

type属性	效果
text	单行文本
password	密码框
radio	单选框
checkbox	多选框
file	选择文件
submit	提交按钮
reset	重置按钮
button	普通按钮，默认无功能，之后配合js添加功能

A.单行文本/密码框

属性	作用
placeholder	用于提示用户输入的文本
required	不能输入为空
autofocus	自动获得光标
value	输入框的内容

<input type="text">

效果：

<input type="text" placeholder="请输入姓名">

效果：

<form action="">
    <input type="text" required>
    <button type="submit">注册</button>
</form>

效果：

<input type="text" autofocus>

效果：

效果：

效果： ## B.单选框/复选框

属性	作用
name	分组(相同name属性的单选框为一组)
checked	默认选中

<input type="radio">语文
<input type="radio">数学
<input type="radio">英语
<input type="radio">政治

效果：

<input type="radio" name="kemu">语文
<input type="radio" name="kemu">数学
<input type="radio" name="kemu">英语
<input type="radio" name="kemu">政治

效果：

<input type="radio" name="kemu">语文
<input type="radio" name="kemu">数学
<input type="radio" name="kemu">英语
<input type="radio" name="kemu" checked>政治

效果：

<input type="checkbox" checked>我同意<a href="https://www.baidu.com" target="_blank">注册条款</a>

效果：

C.选择文件

属性	作用
multiple	多文件选择

<input type="file">

效果：（只可以选中一个文件）

<input type="file" multiple>

效果：

D.按钮(不常用)

属性	作用
value	设置按钮文本
注意：如果需要实现按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可

<form action="">
      姓名：<input type="text" placeholder="请输入姓名" />
      <br />
      密码：<input type="password" placeholder="请输入密码" />
      <br />
      <input type="file" />
      <br />
      <input type="submit" />
<input type="reset" />
 </form>

效果：（第二个是点击了重置选项的）





效果：

图片按钮

效果：

(2)button按钮(常用)

特定：button标签是双标签，可以方便放在文本中显示
注意：谷歌浏览器中button默认是提交按钮

属性(同input系列中按钮)	效果
submit	提交按钮
reset	重置按钮
button	普通按钮，默认无功能，之后配合js添加功能

<button>提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

效果：

<p>affhgjk<button>提交</button>gfjhkh</p>

效果：

(3)select下拉菜单

场景：在网页中提供多个选择项的下拉菜单表

属性	效果
selected	默认选中
标签组成:
标签名	作用
–	–
select	下拉菜单的整体
option	下拉菜单的每一项

<select name="" id="">
        <option>5</option>
        <option>6</option>
        <option>7</option>
</select>

效果：

<select name="" id="">
        <option>5</option>
        <option selected>6</option>
        <option>7</option>
</select>

效果：

(4)textarea文本域

场景：在网页中提供多行文本的表单控件
注意：右下角可以拖拽改变大小(通过css禁用)

属性	效果
cols	文本域内可见宽度
rows	文本域内可见行数

效果：

(5)label

场景：用于绑定内容于表单标签的关系

方法	步骤
1	label标签把内容包起来，表单标签添加id属性；for设置与id相同
2	用label标签把内容和表单标签包裹起来；删除label标签的for属性

方法1：<input type="radio" name="kemu" id="1"/> <label for="1">男</label>
方法2：<label >女
效果：

这样实现了只点击文本“男、女”不点击单选框也可以选中

表格式表单

<table align="center">
    <caption><h2>请填写个人信息</h2></caption>
    <tr>
      <td>用户名:</td>
      <td><input type="text"></label></td>
    </tr>
    <tr>
      <td>所在地区:</td>
      <td><input type="text" placeholder="北京"></td>
    </tr>
    <tr>
      <td>密码:</td>
      <td><input type="password"></td>
    </tr>
    <tr>
      <td>性别:</td>
      <td>
        <label><input type="radio" name="sex">男</label>
        <label><input type="radio" name="sex">女</label>
      </td>
    </tr>
    <tr>
      <td>爱好:</td>
      <td>
      <label><input type="checkbox" name="habbit">听歌</label>
      <label><input type="checkbox" name="habbit">跳舞</label>
      <label><input type="checkbox" name="habbit">运动</label>
      </td>
    </tr>
    <tr>
      <td>上传图像:</td>
      <td><input type="file" value="选择文件"></td>
    </tr>
    <tr>
      <td></td>
      <td>
        <button type="button">注册</button>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <input type='image' src="./btnimg.png">
      </td>
    </tr>
    <tr>
      <td>给我留言:</td>
      <td><textarea name="" id="" cols="30" rows="10"></textarea></td>
    </tr>
    <tr>
      <td>出生年月:</td>
      <td>
        <select name="" id="">
          <option value="">选择年份</option>
        </select>
        <select name="" id="">
          <option value="">选择月份</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>籍贯:</td>
      <td>
        <select name="" id="">
          <option value="">上海</option>
        </select>
      </td>
    </tr>
  </table>