表格和表单

table表格标签

【1】定义和用法#

• <table>用来定义一个表格

• 一个表格由一个或者多个tr,td组成

• tr为一行

• td为一行里面的一个个数据

• th是表头，通常用来定义第一行的数据

• thead用来装表头的那一行，tbody用来装其他行，可写可不写，写上可以让代码看起来更加美观，更加具有可读性

• 标签里面的border属性是表格线条的粗细，cellpadding是表格与内容的间距，cellspacing是表格与表格自建的间距。

  【2】例子#

  <table border="2" cellpadding="20" cellspacing="0" align="center">
      <thead>
      <tr>
          <th>用户名</th>
          <th>密码</th>
          <th>性别</th>
          <th>爱好</th>
      </tr>
      </thead>
      <tbody>
      <tr>
          <td>hqq</td>
          <td>123123</td>
          <td>男</td>
          <td>打游戏</td>
      </tr>
      <tr>
          <td>green</td>
          <td>123456</td>
          <td>男</td>
          <td>洗脚</td>
      </tr>
      </tbody>
  </table>
  

  form表单标签

  【1】介绍#

  • 表单是网页中用于收集用户输入信息的一种方式

  【2】表单的组成#

  • 表单由表单域，表单控件，提示信息组成

  【3】表单域#

  • 表单域是一个包含表单元素的区域

  • 在html标签中，

    标签用于定义表单域，以实现用户信息的收集和传递

  • 会把它范围内的表单元素信息提交给服务器

  <form action="url地址" method="提交方式" name="表单域名称">
      各种表单元素控件
  </form>
  

  • 常用属性

  属性	属性值	作用
  action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
  method	get/post	用于设置表单数据的提交方式，取值为get或post
  name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

  【4】表单控件#

  • 在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容空间。
  • input输入表单元素
  • select下拉表单元素
  • textarea文本域元素

  【5】input的type属性#

  元素类型	示例代码	描述
  文本框	<input type="text" id="username" name="username">	用于输入文本
  密码框	<input type="password" id="password" name="password">	用于输入密码，内容被遮蔽
  单选按钮	<input type="radio" id="male" name="gender" value="male"> <input type="radio" id="female" name="gender" value="female">	用于选择单个选项
  复选框	<input type="checkbox" id="subscribe" name="subscribe" value="yes">	用于多选选项
  数字输入框	<input type="number" id="age" name="age" min="0" max="100" step="1">	用于输入数字
  日期输入框	<input type="date" id="birthdate" name="birthdate">	用于输入日期
  文件上传框	<input type="file" id="avatar" name="avatar">	用于上传文件
  隐藏字段	<input type="hidden" id="user_id" name="user_id" value="12345">	不可见，通常用于存储数据，不需要用户输入

  【6】lable 标签#

  • 标签为input元素定义标签
  • 它用于绑定一个表单元素，当点击表单内的文字时，浏览器会自动将焦点转到对应的表单元素上，用来增加用户体验。
  • 核心：标签的for属性应当与相关元素的id属性相同

  <form action="">
      <input type="radio" id="male"><label for="male">男</label>
  </form>
  

  【7】select表单元素#

  • 在页面中如果由多个选项让用户选择，并且想要节约页面空间时，就可以使用select下拉列表

      <select name="" id="">
          <option value="">我是选项1</option>
          <option value="">我是选项2</option>
          <option value="">我是选项3</option>
          ...
      </select>
  

  【8】textarea文本域标签#

  • 如果用户需要输入大量的文字时，就可以使用文本域标签

      <textarea name="" id="2" cols="30" rows="10">
          我是文本域标签
      </textarea>