关于前端:前端学习笔记一一HTML表单标签form

45次阅读

共计 6386 个字符,预计需要花费 16 分钟才能阅读完成。

form 表单细节

一、表单

1. 表单 <form> 标签用于为用户输出创立 HTML 表单

2. 表单可能蕴含 input 元素,比方文本字段、复选框、单选框、提交按钮等等。

3. 表单还能够蕴含 menus、textarea、fieldset、legend 和 label 元素。

4. 表单用于向服务器传输数据。

二、表单 form 的属性

(一)action 属性

 action 属性规定当提交表单时,向何处发送表单数据

属性值:url 链接的地址

(二)name 属性

name 属性 规定表单的名称。name 属性提供了一种在脚本中援用表单的办法。

(三)method 属性

method 属性规定在提交表单时所用的 HTTP 办法(GET 或是 POST)

1、什么时候应用 GET?

method 属性的默认值是 GET,如果表单的提交是被动的(比方搜索引擎查问),并且没有敏感信息;

当应用 GET 的时候,表单数据是提交到页面的地址栏中的。

2、什么时候应用 post?

地址栏中能够贮存的数据是无限的,如果想要贮存更多数据,更平安的贮存数据就须要应用 post

表单正在更新数据,或是蕴含敏感信息(例如明码)最好应用 post;

post 安全性更好,因为在页面地址栏中提交的数据使不可见的(如果上传的数据比拟多或是要上传图片,就要应用 post)。

(四)legend 元素

<length> 元素为 <fieldset> 元素定义标签

<fieldset> 标签 能够将表单内的相干元素分组,还能够在相干表单元素四周绘制边框。

<form>
 <fieldset>
  <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br>
 </fieldset>
</form>

input 元素必须要加上 name 属性,定义一个名字,后盾才会失常接管输出的数据;

三、表单形容标签的应用

<label> 为 input 元素定义标注

<label for="wenzi"> 文字 </label>
<input type="text" id='wenz'></pre>

label 元素不会向用户出现任何特殊效果。不过,它为鼠标用户改良了可用性。

如果在 label 元素内点击文本,就会触发此控件,使该控件取得焦点。当用户抉择该标签时,浏览器就会主动将焦点转到和标签相干的表单控件上。

<label> 标签的 for 属性该当与相干元素的 id 属性雷同。

为了实现同样的成果,会有另一种写法:不须要 for 和 id 属性;

<label> 文字 <input type="text">
</label></pre>

四、表单束缚属性

(一)required 属性

required 属性是一个布尔属性,规定必须在提交表单之前填写输出字段,必填字段。(required 是 H5 的新属性)

留神:required 属性实用于上面的 input 类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

(二)placeholder 属性

placeholder 属性规定可形容输出字段预期值的简短的提示信息(在输入框外面的提醒文字,内容不会被提交),例如一个样本值或是预期格局的简短的形容。

placeholder 定义的提醒会在用户输出值之前显示在输出字段中。

留神:placeholder 属性实用于上面的 input 类型:text、search、url、tel、email 和 password。

(三)value 属性

value 属性为 input 元素设定值。对于不同的输出类型,value 属性的用法也不同。

type 类型为 button、reset、submit。定义按钮上 显示的文本

type 类型为 text、password、hidden。定义输出字段的 初始值(默认值);

type 类型为 checkbox、radio、image。定义输出 相关联的值

留神:<input type=”checkbox”> 和 <input type=”radio”> 中必须设置 value 属性。

留神:value 属性无奈与 <input type=”file”> 一起应用。

(四)maxlength 属性

maxlength 属性规定输出字段的最大长度,以字符个数计算。

maxlength 属性与 <input type=”text”> 或 <input type=”password”> 配合应用(有输出长度)

(五)size 属性

size 属性规定以字符数计的 <input> 元素的可见宽度。

size  限度表单的长度(不倡议用,用 CSS 去设置更好)

五、表单拜访限度(表单禁用)

(一)readonly 属性

readonly 属性规定输出字段为 只读,无奈输出,能够应用 value 来设置默认值,能够提交到后盾,然而用户无奈批改。

只读字段无奈批改,不过用户依然能够应用 tab 键切换到该字段,还能够选中或拷贝其文本。

readonly 属性能够避免用户对值进行批改,直到满足某些条件为止(比方选中了一个复选框)。而后,须要应用 JavaScript 打消 readonly 值,将输出字段切换到可编辑状态。

readonly 属性可与 <input type=”text”> 或 <input type=”password”> 配合应用。

(二)disabled 属性

disabled 属性定义应该 禁用 input 元素(只能看,不能提交到后盾)

被禁用的 input 元素既不可用,也不可点击。能够设置 disabled 属性,直到满足某些其余的条件为止(比方抉择了一个复选框等等)。而后,就须要通过 JavaScript 来删除 disabled 值,将 input 元素的值切换为可用。

留神:disabled 属性无奈与 <input type=”hidden”> 一起应用。

六、罕用的字段扩大类型

形容
button 定义可点击按钮(少数状况下,用于通过 JavaScript 启动脚本)。
checkbox 定义复选框。
file 定义输出字段和 “ 浏览 ” 按钮,供文件上传。
hidden 定义暗藏的输出字段,尽管暗藏了却仍然存在。
image 定义图像作为提交按钮。
password 定义明码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会革除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输出字段,用户可在其中输出文本。默认宽度为 20 个字符。

H5 新标签                                 

形容
color 定义拾色器
date  定义 date 控件(包含年、月、日,不包含工夫)
datetime  定义 date 和 time 控件(包含年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)
datetime-local  定义 date 和 time 控件(包含年、月、日、时、分、秒、几分之一秒,不带时区)
email  定义用于 e-mail 地址的字段
month  定义 month 和 year 控件(不带时区)
number  定义用于输出数字的字段
range 定义用于准确值不重要的输出数字的控件(比方 slider 控件)
search 定义用于输出搜寻字符串的文本字段
tel 定义用于输出电话号码的字段
time 定义用于输出工夫的控件(不带时区)
url 定义用于输出 URL 的字段
week 定义 week 和 year 控件(不带时区)

七、大量文本和列表

(一)文本域

textarea 标签定义一个多行的文本输出控件

文本域中可包容有限数量的文本,其中的文本的默认字体是等宽字体(Courier)

文本域中的默认值,要放在一对textarea 标签中

能够通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好地·方法是应用 CSS 的 height 和 width 属性

(二)列表框

select 元素能够创立单选或是多选菜单。

 option 标签用于定义列表中的可用选项,即列表项;

optgroup 标签 定义列表项分组

 1 <select>
 2   <optgroup label="Swedish Cars">
 3     <option value="volvo">Volvo</option>
 4     <option value="saab">Saab</option>
 5   </optgroup>
 6   <optgroup label="German Cars">
 7     <option value="mercedes">Mercedes</option>
 8     <option value="audi">Audi</option>
 9   </optgroup>
10 </select>

(三)multiple 属性

multiple属性定义多选,multiple 属性能够设置或是返回是否能够有多个选项被选中。

multiple 的用法:

设置 multiple 属性

selectObject.multiple=true|false

返回 multiple 属性

selectObject.multiple

八、选项框规范打开方式

(一)radio 类型

radio 单选框,当用户点击一个单选按钮时,该按钮会变为选中状态,其余所有按钮会变为非选中状态。

<form> 男性:<input type="radio" checked="checked" name="Sex" value="male" />
<br /> 女性:<input type="radio" name="Sex" value="female" />
</form>

(二)checkbox 类型

<input type="checkbox"> 定义了复选框. 用户须要从若干给定的抉择中选取一个或若干选项,能够多个同时选中。

<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>

(三)checked 属性

checked 属性是一个布尔属性。

checked 属性规定在页面加载时应该被事后选定的 <input> 元素。

checked 属性实用于 <input type=”checkbox”> 和 <input type=”radio”>。

九、文件上传

(一)file 类型

file 类型 定义输出字段和 “ 浏览 ” 按钮,供文件上传

(二)enctype 属性

form 标签中定义的enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

默认地,表单数据会编码为 "application/x-www-form-urlencoded"

就是说,在发送到服务器之前,所有字符都会进行编码(空格转换为 “+” 加号,特殊符号转换为 ASCII HEX 值)

属性值:

application/x-www-form-urlencoded  在发送前编码所有字符(默认)

multipart/form-data  不对字符进行编码。在应用蕴含文件上传控件的表单时,必须应用该值!

text/plain  空格转换为 “+” 加号,但不对特殊字符编码

<form action="demo-post_enctype.php" method="post" enctype="multipart/form-data"><input type="file" name="fname"><br>
  <input type="submit" value="提交">
</form>

(三)accept 属性

accept 规定上传文件的类型,如果多个类型能够应用逗号隔开,例如:accept=”image/png,image/jpg”(这能上传 png 类型的图片)

accept 属性只能与 <input type=”file”> 配合应用。它规定可能通过文件上传进行提交的文件类型。

留神 请防止应用该属性。应该在服务器端验证文件上传

(四)multiple 属性

file 文件上传 配合 multiple 属性能够上传多个文件;

multiple 属性规定输出字段可抉择多个值。

如果应用该属性,则字段可承受多个值。

留神multiple 属性应用欧冠与以下 <input> 类型:email 和 file

十、日期在表单中的应用

(一)date 类型

date 取得日期,包含年月日。

1、应用 mix 和 max 定义开始和完结工夫 如:min=”2030-02-02″

2、也可应用 step 属性设置步长(距离几天才能够选中)

<input type="date" max='2030-02-02' min='2019-01-01' step='5'>

(二)datetime 类型

定义 date 和 time 控件,取得日期和工夫,包含年、月、日、时、分、秒、几分之一秒。

(三)time 类型

取得工夫,定义用于输出工夫的控件(不带时区)。

(四)week 类型

week 类型 取得年份和周数

(五)month 类型

month 类型 取得年和月

(六)datetime-local 类型

datetime-local  年月日时分秒

十一、搜寻表单和 datalist 数据列表

(一)search 类型

search 类型 能够定义搜寻框,但须要 input type=search 外面包上一层带 action 属性的 form。

(二)datalist 标签

<datalist> 标签规定了 <input> 元素可能的选项列表。

<datalist> 为 input 元素提供‘主动实现’的个性。用户能看到一个下拉列表,外面是事后定义好的内容。这些内容将作为用户输出的数据。

为 datalist 元素增加 id,其余 input 元素通过 list 属性指向 datalist 的 id,从而绑定 datalist 元素

一对 option 标签中的是提醒文字,如果不想有提醒文字,能够将 option 变成单标签

<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer"> 兼容性不好 </option>> <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

十二、表单历史数据主动提醒 autocomplete

autocomplete属性

type=search 会有许多默认款式和行为,会默认下拉框显示历史搜寻记录,在不同的浏览器或是设施上会有不同显示成果。

autocomplete 属性规定表单是否应该启用主动实现性能。

主动实现容许浏览器预测对字段的输出。当用户在字段开始输出时,浏览器基于之前输出过的历史记录,显示出字段中填写的选项。

留神:除了 Opera,其余支流浏览器都反对 autocomplete 属性

留神:autocomplete “on” 实用于 表单,”off” 实用于特定的输出字段,反之亦然。

属性值:

off 输出的时候没有历史提醒,规定禁用主动实现性能。用户必须在每次应用时输出值到每个字段中,浏览器不会主动实现输出

on 输出的时候会有历史提醒,默认。规定启用主动实现性能。浏览器会基于用户之前键入的值主动实现值

<form action="demo-form.php" method="get" autocomplete="on"> 
First name:<input type="text" name="fname"><br> 
E-mail: <input type="email" name="email"><br>
  <input type="submit">
</form>

正文完
 0