前端菜鸟笔记 Day-2 Form表单

文章大纲来源：【Day 2】Form表单

• HTML表单
• 表单元素
• 表单属性
• HTML5追加的表单元素

HTML表单

<form>

<form>标签定义 HTML 表单：

<form>
  ...
  form elements
  ...
</form>

表单元素

HTML 表单包含表单元素。

表单元素指的是不同类型的：

• input元素
• 复选框
• 单选按钮
• 提交按钮
• 等等

内容引用：HTML表单元素

<input>

最重要的表单元素。

<input> 元素根据不同的 type 属性可以变化为多种形态。

<form>
  ...
  <input type="..." ...>
  ...
</form>

text

单行输入框。

<input type="text" name="usr">

password

字符掩码处理的单行输入框。

<input type="password" name="psw">

submit

一个提交按钮。

<input type="submit">

至于用哪个程序来处理提交的表单数据，在<form>标签中的action属性中定义。

<form action="action.php">
  ...
  <input type="submit" value="Submit">
</form>

其中的value属性定义按钮上显示的文字，缺省会显示默认文本（中文环境下为“提交”）。

radio

定义单选按钮。

<form>
  <input type="radio" name="sex" value="male" checked>Male
  <br>
  <input type="radio" name="sex" value="female">Female
</form>

其中的name属性非常重要，多个radio类型的<input>只有在name属性相同时才具有单选限制。

checkbox

定义多选框，允许选0个或多个。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

name属性作用类似radio。

button

定义按钮。

<input type="button">和<button>标签的异同会在之后单独的专题说明。

<input type="button" onclick="alert('Hello World!')" value="Click">

• onclick定义触发的方法
• value定义按钮显示文字

file

用于选取文件和上传文件。

<input type="file" name="pic" accept="image/gif" />

涉及到的时候会在之后单独的专题说明。

reset

定义重置按钮，触发后会清楚表单的所有数据。

<input type="reset" value="Reset">

<select>

定义下拉列表。

<select name="cars">
  <option value="volvo">沃尔沃</option>
  <option value="mazda">马自达</option>
  <option value="hevrolet">雪佛兰</option>
  <option value="audi">奥迪</option>
</select>

<option>定义待选择的选项，列表通常会默认选择第一个选项，可以使用slected属性来定义预定义选项。

<option value="mazda" selected>马自达</option>

<textarea>

定义多行输入字段。

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<button>

定义可点击的按钮。

<button type="button" onclick="alert('Hello World!')">Click</button>

表单属性

• value（通用）
• name（通用）
• readonly（通用）
• disable（通用）
• type（重要）
• checked（radio、checkbox，重要）
• size
• maxLength

内容引用：HTML Input 属性

value

value属性规定输入字段的初始值，和按钮的显示文字。

<input type="text" name="firstname" value="John">

readonly

readonly属性规定输入字段只读（不可修改）。

<input type="text" name="firstname" value="John" readonly>

属性不用赋值，等同于readonly="readonly"。

disabled

disabled属性规定输入字段是禁用的（不可用和不可点击）。

并且也不会被提交（与readonly不同）。

<input type="text" name="firstname" value="John" disabled>

属性不用赋值，等同于disabled="disabled"。

size

size属性规定输入字段的尺寸（以字符计）。

这里的尺寸，具体指的是类似输入框宽度的属性。

<input type="text" name="firstname" value="John" size="40">

maxlength

maxlength属性规定输入字段允许的最大长度。

<input type="text" name="firstname" maxlength="10">

超过长度的字符不会被接受（也就是输入不进去），但是用户超过时，input元素本身不会有任何提示。

HTML5追加的表单元素

了解内容，主要是一些新增的Input类型：

• email
• url
• number
• range
• Date pickers
• search
• color

目前开发的经验来看，这类组件如果对UI统一需求不高的话，可以尝试使用一点，不过一般情况下都会造轮子或者用现成较为成熟的轮子来代替使用这些。

内容连接：HTML5 Input 类型

个人静态博客：

• 气泡的前端日记： https://rheabubbles.github.io