html表单

296 阅读4分钟

form

表单元素本身是指<form>,不过它也有一个更广泛的概念,指构成表单的所有元素。

首先就

元素本身来说,主要有两个属性:

  • action:表示表单数据所提交到的处理地址(如果不知道处理地址,可先用#表示)
  • method:表示提交内容的方式,默认取值为 get,可以设置为 post

接下来将会简单介绍几种form表单常用元素。在介绍表单常用元素之前,先说下一般它们都通用的几个属性:

  • name:表示字段名称
  • value:表示字段值(最后提交的表单数据就是所有的字段值)
  • disabled:表示字段是否禁用,该属性可以不用设置值,加上该属性即表示禁用
  • readonly:表示字段是否只读,该属性可以不用设置值,加上该属性即表示只读

表单内元素

input

<input>元素跟<img>元素一样,不需要闭合标签。除了上面说到的通用属性外,其常见属性如下:

  • type:必备属性,常见取值如下:
  • text:文本输入框
  • password:密码输入框
  • search:搜索框
  • number:数字输入框
  • radio:单选按钮
  • checkbox:复选框
  • hidden:隐藏域(页面不可见,用来保存数据等)
  • file: 上传文件
  • button:普通按钮
  • submit:提交按钮
  • reset:重置按钮
  • placeholder:如为输入框时,可设置该属性,在输入框中灰色显示提示信息

简单示例如下:

<!-- 文本输入框 -->
<input type="text" name="username">
<!-- 文本输入框提示信息 -->
<input type="text" name="username" placeholder="用户名">
<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索">
<!-- 数字输入框 -->
<input type="number" name="age" placeholder="只能输入数字">
<!-- 密码输入框 -->
<input type="password" name="pwd" placeholder="密码">
<!-- 单选框 -->
<input type="radio" name="sex" value="man">男
<!-- 复选框 -->
<input type="checkbox" name="hobby" value="music">音乐
<!-- 隐藏域 -->
<input type="hidden" name="other-data" value="用户不可见数据">
<!-- 上传文件 -->
<input type="file" name="file">
<!-- 普通按钮 -->
<input type="button" name="button" value="普通按钮">
<!-- 提交按钮 -->
<input type="submit" name="submit" value="立即加入">
<!-- 重置按钮 -->
<input type="reset" name="reset">

<textarea>元素

用于多行文本输入,如上面的新浪微博截图中的发表微博就是个多行文本输入框,我们常用的评论输入框也是这个。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过等我们学了 CSS 之后,更好的办法是使用 CSS 的 height 和 width 属性来控制其尺寸。

简单示例如下: <textarea rows="5" cols="30" placeholder="请输入评论"></textarea>

<select>元素

用于创建选项菜单,默认只能选择一个值,可通过设置属性multiple="multiple"来实现多选(很少很少使用多选)。 其选项为<option>元素,常用有两个属性:

  • value:表示选中该选项的值。
  • selected: 表示默认选中。 简单示例如下:
<!-- 单选且有默认选中值 -->
<select name="tag">
  <option value="html" selected>HTML</option>
  <option value="css">CSS</option>
  <option value="js">JS</option>
</select>
<!-- 多选 -->
<select name="tags" multiple="multiple">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JS</option>
</select>

<button>元素

<button>元素用来定义按钮,跟 input 定义的按钮不同,这个是有闭合标签的。简单示例如下: <button>我是个普通按钮</button>

同样也可以通过设置 type 属性来实现提交按钮和重置按钮,不过不建议这么做。

<!-- 下面的两种方式不建议使用 -->
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>

一般对于提交与重置按钮,我们建议使用 input 来定义,对于普通按钮可以使用 button。

<label>元素

<label>元素用于关联表单元素的标题,可直接包裹表单元素,也可以通过设置其 for 属性关联到表单元素的 id 属性,这样点击 label

标题上关联的表单元素就可以自动获取焦点,提升用户体验。

简单示例如下:

<!-- 包裹表单元素 -->
<label>用户名:<input type="text"></label>

<!-- 使用for属性关联表单元素的id属性 -->
<label for="username">用户名:</label><input type="text" id="username">

练习

创建一个登录表单,包括用户名、密码、下次自动登录、登录按钮(为了练习不同的元素,这个按钮我们采用 button 元素。但实际情况下,一般采用 input 元素,设置其 type 属性为 submit),用户名和密码需要使用 placeholder 属性提示。