HTML笔记 - HTML中表单标签的使用

HTML中表单标签的使用

目录

• HTML中表单标签的使用
  • 1. 表单标签
  • 2. 表单的提交
  • 3. 表单的格式化

1. 表单标签

• form标签表示表单

  input type	效果	设置
  text	文件输入框	value设置默认显示内容
  password	密码输入框	value设置默认显示内容
  radio	单选框	name属性可以对其进行分组；checked="checked"表示默认选中
  checkbox	复选框	checked="checked"表示默认选中
  reset	重置按钮	value属性修改按钮上的文本
  submit	提交按钮	value属性修改按钮上的文本
  button	(普通)按钮	value属性修改按钮上的文本
  file	文件上传域
  hidden	隐藏域	当我们要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域（信息会在提交的时候同时发给服务器）

  <form>
      用户名称：<input type="text" value="默认值"/><br/>
      用户密码：<input type="password" value="abc"/><br/>
      性别：<input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked"/>女<br/>
      <input type="reset" />
  </form>
  

  select 标签是下拉列表框

  option标签是下拉列表框中的选项，selected = "selected"设置默认选中

  textarea表示多行文本输入框（起始标签和结束标签中的内容是默认值）

  • rows属性设置可以显示几行的高度
  • cols属性设置每行可以显示几个字符宽度

  国籍：<select>
      	<option>--请选择国籍--</option>
      	<option>中国</option>
      	<option>美国</option>
      </select><br/>
  自我评价：<textarea rows="10" cols="20"></textarea><br/>
  

2. 表单的提交

• 对于input type="submit"，它可以配合事件属性和超链接将数据提交到服务器，有get和post两种请求方式

  <form action="https://www.baidu.com/" method="get">
      <input type="text" name="username" value="123"/>
      <input type="submit"/>
  </form>
  

• 表单提交时，数据没有发送给服务器的三种情况:

  1. 表单项中没有设置name属性值
  2. 单选，复选，下拉列表中的option标签都需要添加value属性，以便发送给服务器
  3. 表单项不在提交的form标签中

• GET请求的特点是：

  1. 游览器地址栏中的地址是：action属性+?+请求参数
  2. 不安全
  3. 有数据长度的限制

• POST请求的特点是：

  1. 游览器地址栏中只有action属性值
  2. 相对于GET请求安全
  3. 理论上没有数据长度的限制

3. 表单的格式化

• 结合表格可以让表单更加美观

  <form>
      <table align="center">
          <tr>
              <td>用户名称：</td>
              <td><input type="text" value="默认值"/></td>
          </tr>
          <tr>
              <td>用户密码：</td>
              <td><input type="password" value="abc"/></td>
          </tr>
          <tr>
              <td>性别：</td>
              <td><input type="radio" name="sex"/>男<input type="radio" name="sex" checked="checked"/>女</td>
          </tr>
          <tr>
              <td>国籍：</td>
              <td><select>
                  <option>--请选择国籍--</option>
                  <option>中国</option>
                  <option>美国</option>
              </select></td>
          </tr>
          <tr>
              <td>自我评价：</td>
              <td><textarea rows="10" cols="20"></textarea></td>
          </tr>
          <tr>
              <td><input type="reset"/></td>>
              <td><input type="submit"/></td>>
          </tr>
      </table>
  </form>