html基础应用步骤代码,HTML基础——表单的应用

1、表单的构成

一个完整的表单由表单控件(表单元素)、提示信息和表单域3个部分构成。

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框等。

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义、处理表单数据所用程序的url地址及数据提交到服务器的方法。

注：如果不定义表单域，表单中的数据就无法传送到后台服务器。

2、创建表单

标记被用于定义表单域，即创建一个表单。

基本格式：

创建表单

账号:

密码:

注：

中的所有内容都会被提交给服务器。

3、表单属性

①.action属性：用于指定接收并处理表单数据的服务器程序的url地址。

例如：

　　　　　　

注：action的属性值可以是相对路径和绝对路径，还可以为接收数据的E-mail邮箱地址。

　　　　

②.method属性：用于设置表单数据的提交方式。(取值为get或post)

例如:

get方法：浏览器将会按照下面两步来发送数据。首先：浏览器与action属性中指定的表单处理服务器建立联系，然后直接在一个传输步骤中发送所有的表单数据。

post方法：分两步来发送数据。首先：浏览器将于action属性中指定的表单处理服务器建立联系，然后，浏览器按分段传输的方法将数据发送给服务器。

注：get方法保密性差，不能大量传输数据。post方法保密性强，能大量传输数据。一般使用post方法。

③.name属性：name属性用于指定表单的名称。

用于指定表单的名称。

④.autocomplete属性

用于指定表单是否有自动完成功能。autocomplete属性有2个值，对他们的解释如下。

on：表单有自动完成功能。

off：表单无自动完成功能。

例如:

autocomplete属性的使用

用户名:

昵  称:

⑤.novalidate属性：指定在提交表单时取消对表单进行有效的检查。

例如：

novalidate属性取消表单验证

请输入电子邮件地址:

4、input元素及属性

用途：元素是表单中最常见的元素，网页中常见的有单行文本框、单选按钮、复选框等都是通过它定义的。

input元素的相关属性：

(1)、input元素的type属性：用于定义不同的控件类型。

①.单行文本输入框单行文本输入框常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有name、value、maxlength。

②.密码输入框

密码输入框用来输入密码，其内容将以圆点的形式显示。

③.单选按钮

注：

定义单选按钮时，必须为同一组中的选项指定相同的name值，这样"单选"才会生效。

可以对单选按钮应用checked属性，指定默认选中项。

④.复选框

可对其应用checked属性，指定默认选中项。

⑤.普通按钮

通常配合javascript脚本语言使用。

⑥.提交按钮

是表单的核心控件，用来在页面中使用户单击提交表单数据。

可以对其应用value属性，改变提交按钮上的默认文本。

⑦.重置按钮

当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。

可以对其应用vale属性，改变重置按钮上的默认文本。

⑧.图像形式的提交按钮

定义图像形式的提交按钮，必须为其定义src属性指定图像的url地址。

⑨.隐藏域

隐藏域对于用户是不可见的，通常用于后台的程序。

⑩.文件域

当定义文件域时，页面中将出现一个文本框和一个“浏览...”按钮，用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。

代码示例：

input控件

用户名：

密码：

性别：

男

女

兴趣：

唱歌

跳舞

游泳

上传头像：

⑪email类型

专门用来输入E-mail地址的文本输入框。会自动验证输入内容是否符合E-mail邮件地址格式。

⑫url类型

专门用来输入URL地址的输入框。有自动检查功能。

⑬tel类型

用于提供输入电话号码的输入框。通常会和pattern属性配合使用。

⑭search类型

专门用于输入搜索关键字的文本框。

⑮color类型

专门用于提供设置颜色的文本框，用于实现一个RGB颜色输入。

代码示例:

input类型

请输入您的邮箱:

请输入个人网址:

请输入电话号码:

输入搜索关键词:

请选取一种颜色:

⑯number类型

用于提供输入数值的文本框。有自动检查功能。

可以对输入的数字进行限制，规定允许最大值和最小值，合法的数字间隔或默认值等。

◆value：指定输入框的默认值

◆max：指定输入框可以接受的最大的输入值

◆min：指定输入框可以接受的最小的输入值

◆step：输入与合法的间隔，如果不设置，默认值为1

代码示例:

number类型的使用

请输入数值:

⑰range类型

用于提供一定范围内数值的输入范围，在页面中显示为滑动条。常用属性与number相同。通过step属性指定每次滑动的步幅。

⑱Date pickers类型

时间日期类型：用于验证输入的日期；

date 选取日、月、年

month 选取月、日

week 选取周和年

time 选取时间(小时和分钟)

datetime 选取时间、日、月、年(UTC时间)

detetime-local 选取时间、日、月、年(本地时间)

代码示例:

时间日期类型的使用

(2)、input元素的其他属性

①autofocus属性：用于指定页面加载后是否自动获取鼠标焦点。

代码示例：

autofocus属性的使用

请输入搜索关键词:

②form属性：

可以把表单内的子元素写在页面中的任意位置，只需为这个元素指定form属性并设值属性值为该表单的id即可。

此外，form属性还允许规定一个表单控件从属于多个表单。

代码示例：

autocomplete属性的使用

用户名：

昵    称:

③list属性：

用于指定输入框所绑定的datalist元素，其值是个datalist元素的id。

datalist元素用于试下年数据列表的下拉效果。

代码示例：

list属性的使用

请输入网址:

④multiple属性：

用于指定输入框可以选择多个值，该属性适用于email和file类型的input元素。

注：

multiple属性用于email类型的input元素时，表示可以向文本框中输入多个E-mail地址，用逗号隔开。

multiple属性用于file类型的input元素时，表示可以选择多个文件。

代码示例：

multiple属性的使用

电子邮箱:

  (如果电子邮箱有多个,请使用逗号分隔)

上传照片:

⑤min、max、step属性：

用于为包含数字或日期的input输入类型规定限制。适用于date、pickers、number和range标签。

●max：规定输入框所允许的最大输入值。

●min：规定输入框所允许的最小输入值。

●step：为输入框规定合法的数字间隔，如果不设置，默认值是1。

⑥pattern属性：

用于验证input类型输入框中，用户输入的内容是否与所定义的正则表达式相匹配。

pattern属性适用于的类型是：text、search、url、tel、email和password的标记。

代码示例：

pattern属性

账     号：(以字母开头,允许5~16字节,允许字母数学下划线)

密     码：(以字母开头，长度在6~18，只能包括字母、数字和下划线)

身 份 证：(15位、18位数字)

E-mail地址:

⑦placeholder属性

用于为input类型的输入框提供相关提示信息，以描述输入框期待用户输入何种内容。

在输入框为空时显式出现，而当输入框获得焦点时则会消失。注：该属性适用于type属性值为text、search、url、tel、email及password的标记

代码示例：

placeholder属性

请输入邮政编码:

⑧required属性

用于规定输入框填写的内容不能为空，否则不允许用户提交表单。

代码示例：

required属性

请输入姓名：

(3)、其他表单元素

①、textarea元素

通过textarea控件可以轻松的创建多行文本输入框。

格式：

文本内容

cols和rows为标记的必须属性。

其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数。

他们的取值均为正整数。

textarea的可选属性

name 由用户自定义 控件的名称

readonly readonly 该空间内容为只读(不能编译修改)

disabled disabled 第一次加载页面时禁用该标签(显示为灰色)

代码示例：

textarea控件

评论:

评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。

②、select元素

用来定义页面的下拉菜单。

基本格式：

选项1

选项2

选项3

...

注：

标记嵌套在标记中，用于定义下拉菜单中的具体选项。

每对中至少应包含一对。

标记名

常用属性

描述

size

指定下拉菜单的可见选项数(取值为正整数)

multiple

定义multiple="multiple"时，下拉菜单将具有多项选择的功能，方法为按住Ctril键的同时选择多项

selected

定义selecet="selecet"时,当前项即为默认选中项

代码示例：

select控件

所在校区：

-请选择-

北京

上海

广州

武汉

成都

特长:(单选):

唱歌

画画

跳舞

爱好(多选):

读书

写代码

旅行

听音乐

踢球

来源：https://www.cnblogs.com/dfif/p/12008615.html