发表于: 2018-12-04 17:33:46

1 701


今天完成的事:根据师兄日志提示,修改任务三、任务四,看了HTML表单、输入类型。


明天计划事情:任务三通过了,就提交任务四,查看任务五。


遇到问题:技术上暂时没有,自身的问题,比较粗心大意。


收获:(了解了form表单的属性和input输入框的属性)

一、HTML表单:用于搜集不同类型的用户输入(HTML表单包含表单元素)

<form>标签用于为用户输入创建HTML表单

HTML form属性:

1、accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。

2、action 规定向何处提交表单的地址(URL)(提交页面)。

3、autocomplete 规定浏览器应该自动完成表单(默认:开启)。

4、enctype 规定被提交数据的编码(默认:url-encoded)。

5、method 规定在提交表单时所用的 HTTP 方法(默认:GET)。

6、name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。

7、novalidate 规定浏览器不验证表单。

8、target 规定 action 属性中地址的目标(默认:_self)。


二、HTML表单元素

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

2、<select>元素(下拉列表),<option> 元素定义待选择的选项。列表通常会把首个选项显示为被选选项,能

够通过添加 selected 属性来定义预定义选项。

3、<textarea> 元素定义多行输入字段(文本域)

HTML5 增加了如下表单元素:

4、<datalist>元素为 <input> 元素规定预定义选项列表。用户会在他们输入数据时看到预定义选项的下拉列表

。<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

5、<keygen>

6、<output>


三、fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果

,或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

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


四、HTML输入<input>类型type

1、text:表示输入为文本

2、password:表示输入为密码类型(掩码处理(显示为星号或实心圆))

3、submit:定义提交表单数据至表单处理程序的按钮。表单处理程序(form-handler)通常是包含处理输入数据

的脚本的服务器页面。在表单的 action 属性中规定表单处理程序(form-handler)

4、radio:单选按钮(只能选一个)

5、checkbo:多选按钮(不选或者能选择多个)

6、button:展示为按钮

HTML5 增加了多个新的输入类型:

7、color:用于应该包含颜色的输入字段。

8、date:用于应该包含日期的输入字段。

9、datetime:允许用户选择日期和时间(有时区)。

10、datetime-local: 允许用户选择日期和时间(无时区)。

11、email: 用于应该包含电子邮件地址的输入字段。

12、month:允许用户选择月份和年份。

13、number:用于应该包含数字值的输入字段(可以对数字做出限制)。

14、range: 用于应该包含一定范围内的值的输入字段。

15、search: 用于搜索字段(搜索字段的表现类似常规文本字段)。

16、tel: 用于应该包含电话号码的输入字段(目前只有 Safari 8 支持 tel 类型。)

17、time:允许用户选择时间(无时区)。

18、url:用于应该包含 URL 地址的输入字段

19、week:允许用户选择周和年。

注释:老式 web 浏览器不支持的输入类型,会被视为输入类型 text。


五、常用的输入限制:

1、disabled 规定输入字段应该被禁用。

2、max 规定输入字段的最大值。

3、maxlength 规定输入字段的最大字符数。

4、min 规定输入字段的最小值。

5、pattern 规定通过其检查输入值的正则表达式。

6、readonly 规定输入字段为只读(无法修改)。

7、required 规定输入字段是必需的(必需填写)。

8、size 规定输入字段的宽度(以字符计)。

9、step 规定输入字段的合法数字间隔。

10、value 规定输入字段的默认值。


六、HTML input属性

1、value:规定输入字段的初始值

2、readonly 属性规定输入字段为只读(不能修改)(readonly 属性不需要值。它等同于 readonly="readonly"

。)

3、disabled 属性规定输入字段是禁用的。被禁用的元素是不可用和不可点击的。被禁用的元素不会被提交。

4、size 属性规定输入字段的尺寸(以字符计)

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

HTML5 为 <input> 增加了如下属性:

5、autocomplete:属性规定表单或输入字段是否应该自动完成。当自动完成开启,浏览器会基于用户之前的输入

值自动填写值。(on或off)

6、autofocus:如果设置,则规定当页面加载时 <input> 元素应该自动获得焦点。

7、form:规定 <input> 元素所属的一个或多个表单。如需引用一个以上的表单,请使用空格分隔的表单 id 列

表。

8、formaction:规定当提交表单时处理该输入控件的文件的 URL。覆盖 <form> 元素的 action 属性。适用于 

type="submit" 以及 type="image"。

9、formenctype:规定当把表单数据(form-data)提交至服务器时如何对其进行编码(仅针对 method="post" 

的表单),覆盖 <form> 元素的 enctype 属性。适用于 type="submit" 以及 type="image"。

10、formmethod:定义用以向 action URL 发送表单数据(form-data)的 HTTP 方法,覆盖 <form> 元素的 

method 属性。适用于 type="submit" 以及 type="image"。

11、formnovalidate:如果设置,则规定在提交表单时不对 <input> 元素进行验证。覆盖 <form> 元素的 

novalidate 属性。可用于 type="submit"。

12、formtarget:规定的名称或关键词指示提交覆盖 <form> 元素的 target 属性。表单后在何处显示接收到的

响应。可与 type="submit" 和 type="image" 使用。

13、height 和 width:规定 <input> 元素的高度和宽度。仅用于 <input type="image">。(请始终规定图像的

尺寸。如果浏览器不清楚图像尺寸,则页面会在图像加载时闪烁。)

14、list:list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。

15、min 和 max:规定 <input> 元素的最小值和最大值。适用于如需输入类型:number、range、date、

datetime、datetime-local、month、time 以及 week。

16、multiple:如果设置,则规定允许用户在 <input> 元素中输入一个以上的值。

17、pattern (regexp):规定用于检查 <input> 元素值的正则表达式,适用于以下输入类型:text、search、

url、tel、email、and password。

18、placeholder:规定用以描述输入字段预期值的提示(样本值或有关格式的简短描述),该提示会在用户输入

值之前显示在输入字段中。适用于以下输入类型:text、search、url、tel、email 以及 password。

19、required:如果设置,则规定在提交表单之前必须填写输入字段,适用于以下输入类型:text、search、url

、tel、email、password、date pickers、number、checkbox、radio、and file.

20、step:规定 <input> 元素的合法数字间隔。step 属性可与 max 以及 min 属性一同使用,来创建合法值的

范围。适用于以下输入类型:number、range、date、datetime、datetime-local、month、time 以及 week。



针对以上总结:

1、form中,常用属性action 

2、input常用属性:required、placeholder,常用类型:text、number、password




返回列表 返回列表
评论

    分享到