前端——表单总结

HTML表单和输入

定义

1、HTML表单用于收集不同类型的用户的输入

2、HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器

HTML表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）
等等。

HTML5新标签

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮

<form>元素

<form>元素定义HTML表单
实例
使用<form>标签来创建表单

<form>
    .
    form elements
    .
</form>

<form>属性的列表：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

<input>元素

<input>元素是最重要的表单元素
<input>元素有很多形态，由不同的type属性决定

类型	描述
text	定义常规文本输入
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）

type所有属性可以参考以下网站：
HTML <input> 标签

<input>元素在<form>元素中使用

文本输入

定义用于文本输入的单行输入字段：

<form>
    姓：<input type="text" name="fname"><br>
    名：<input type="text" name="lname"><br>
</form>

注：表单本身不可见，该文本字段默认宽度为20字符。
效果显示

注：<input>标签支持全局属性和所有HTML事件属性

单选按钮输入

<input type=“radio”>定义单选按钮。
（单选按钮允许用户在有限数量的选项中选择其中之一）

<form>
	<input type="radio" name="sex"value="male" checked>男
	<input type="radio" name="sex"value="male" checked>女
</form>

效果显示

提交按钮

<input type=“submit”>定义用于向表单处理程序提交表单的按钮
表单处理程序在表单的 action 属性中指定

<center>
    <form>
        姓：<input type="text" name="fname"><br>
        名：<input type="text" name="lname"><br>
        <input type="radio" name="sex"value="male" checked>男
        <input type="radio" name="sex"value="male" checked>女
        <br>
        <input type="submit" value="确认提交">
    </form>
</center>

效果显示

<textarea>元素

<textarea>标签定义一个多行的文本输入控件
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性

<center>
    <form>
        <textarea rows="10" cols="30">
            这是一个文本框
        </textarea>
    </form>
</center>

效果展示：

注：<textarea>标签支持HTML全局属性，支持HTML事件属性

<fieldset>元素

<fieldset>标签可以将表单内的相关元素分组；会在相关表单元素周围绘制边框

<fieldset>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
	Date of birth: <input type="text">
</fieldset>

效果显示：

<legend>元素

<legend>元素为<fieldset>元素定义标题

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
  </fieldset>
</form>

效果显示：

<select>元素和 <option>元素

<select>元素用来创建下拉列表
<select>元素中的<option>标签定义了列表中的可用选项
实例：
创建带有4个选项的选择列表

<select>
	<option value="volvo">篮球</option>
	<option value="saab">羽毛球</option>
	<option value="mercedes">乒乓球</option>
	<option value="audi">橄榄球</option>
</select>

效果显示：

<optgroup>元素

<optgroup> 标签经常用于把相关的选项组合在一起
实例：
通过<optgroup> 标签把相关的选项组合在一起

<select>
	<optgroup label="水果">
 		<option value="apple">苹果</option>
        <option value="lemon">柠檬</option>
     </optgroup>
     <optgroup label="球类">
         <option value="baseball">棒球</option>
         <option value="volleyball">排球</option>
     </optgroup>
</select>

效果显示：