html的表单

前言

本文主要介绍HTML的表单

一、HTML表单

1.1 表单的简介

HTML 表单用于搜集不同类型的用户输入，是一个包含表单元素的区域。表单中可以利用 action 来规定表单提交的地址，以及 method 来确认表单提交的方法。

1.2 表单的基本结构

• <form> 来定义一个表单，标签内部可以写 action method 等属性
• <form> 表单内部用于放置各种表单元素，如 input 元素、select 元素、textarea元素

二、表单的属性

2.1 、action

语法：<form action=" 这里写需要提交的地址"></form>

2.2 、method

语法：<form method="get/post"></form>
将表单数据从浏览器送到服务器的方法。get 以 url 传递，有一定限制，post 用于传递大量数据，速度较慢。

三、表单的元素

3.1 、输入元素 <input>

主要属性：

3.1.1、

• name: input 元素的名称，对提交到后的表单数据进行标记
• value：设置默认值 ，单选复选必须使用
• placeholder:：输入框的占位符
• maxlength：用户输入的最大字符长度（限于密码框和文本框）
• readonly: 只读
• size：输入框的宽度
• width\height: 用于 image

3.1.2、输入框（ type）

• text（文本输入框）、password（密码输入框）

语法：<input type="text/password" name=" " />

3.1.3、按钮（ type）

• button（按钮）

语法：<input type="button" value="按钮" name=" " onclick="事件发生" />
radio（单选按钮）、checkbox（复选按钮）
语法：
<input type="radio" value="单选1" name="a" checked(选中) />
<input type="radio" value="单选2" name="a" />

<input type="checkbox" value="多选1" name="b" checked(选中) />
<input type="checkbox" value="多选2" name="b" />

• reset（重置按钮）
  语法：<input type="reset" value="重置" name=" "/>
  点击后表单会刷新为默认状态
• submit（提交按钮）
  语法：<input type="submit" value="提交" name=" "/>
  提交表单到 action 指定的位置

3.1.3、文件（ type）

• file（文件）
  语法：<input type="file" name=" " accept=""/>
  accept 可以限制上传的文件类型

3.1.4、隐藏（ type）

• hidden（隐藏的输入字段）
  语法：<input type="hidden" name=" " />

3.1.5、图像（ type）

• image（图像按钮）
  语法：<input type="image" name=" " src="图像文件的 url " alt="图像无法显示的替代文本"/>

3.1.6、号码（ type）

• tel（手机号码）
  语法：<input type="tel" name=" " />
  用于输入电话号码

3.1.7、数字（ type）

• number（数字）
  语法：<input type="number" name=" " min="允许的最小值" man="允许的最大值"/>
  用于输入数字

3.1.7、日期（ type）

• date（年-月-日）
  语法：<input type="date" value=" " min="开始日期" max="结束日期">
  自然，选择月份有 month 、星期有 week 、时间有 time

3.1.8、url（ type）

• url（url字段）
  语法：<input type="url" name=" " />

3.1.8、email 地址（ type）

• email（email 地址）
  语法：<input type="email " name=" " />

3.1.9、颜色（ type）

• color（颜色）
  语法：<input type="color" name=" " />

3.2 、下拉菜单 <select>

3.2.1、语法

<form>
<select disabled（禁用下拉列表）>
<option name="下拉列表名称"  >选择1</option>
<option>选择2</option>
<option>选择3</option>
</select>
</form>

3.2.2、属性

• multiple（下拉列表可选多项）
  语法：<select multiple></select>
  在多选时，需要 Ctrl + 鼠标左键。

• size（下拉列表显示项数）
  语法：<select size="1"></select>
  数字为几，就显示几项。

3.3 、多行文本框<textarea>

3.3.1、语法

<textarea rows="10" cols="30">
文本框。
</textarea>

cols: 规定文本区域内可见的宽度。rows: 规定文本区域内可见的行数。