html表单的创建方法,html制作一个表单 收藏 0

前端入门——html 表单控件使用

上篇介绍了表单的使用，表单有很多控件，比如输入框，密码框、文本域，按钮等。按类型可分如下：

• 输入类控件
• 菜单类控件

此类控件有很多种类型，使用<input type=\”类型\”>语法，常见类型如下：

文本输入框和密码框

除了显示形式不一样，其它属性一样，有以下属性：

• name —— 定义文字字段名称，用于和其它控件区别，不能包含特殊字符，也不可使用html 标签名称
• maxlength —— 定义文本框可输入字符最大长度
• size —— 定义文本框在页面中显示的长度
• vaule —— 定义文本框中默认的值

如下是文本输入框和密码框制作一个登录表单

html代码：

显示效果：

HTML5 输入类型

除了以上几种类型，HTML5 还增加了多个新的输入类型：

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

如下代码：

效果如下：

单选和多选按钮

使用 type = “radio” 和 type =“checkbox” 定义是单选还是多选，除了name和value属性外，单选和多选都有一个 checked属性定义默认选择的项，checked = “true”指选中那个选项，表单会将 checked = “true” 的选型值传递给后台。

如下实例：

显示效果：

单选和多选传递给后台的数据是不一样的，如下会看到地址栏中的数据，多选会发送多个值，后台将会获取一个数组形式的数据。

普通按钮、提交按钮、重置按钮

普通按钮：type = “button”，一般配合脚本使用，语法如下：

value 值就是按钮在页面显示的文字，onclick属性定义了脚本事件，这里指单击按钮时所进行的处理。

如下示例：

单击您好按钮

提交按钮：type = “submit”，用于提交表单内容，是一种特殊按钮。

如刚才的登录表单，提交后会返回结果：

重置按钮：type=\”reset\”，用于清除表单数据，也是一种特殊按钮。

输入数据

点击重置按钮后，表单数据清空

重置清空数据

HTML5 按钮

除了使用input定义按钮，还可以使用 html5 新增的<button> 标签定义按钮，button 使用语法如下：

其它输入类控件

隐藏域 —— hidden文件域 —— file

如下示例：

显示效果

可以看到，隐藏域在页面中不显示，单击文件域选择文件按钮可以选择文件，比如word文件，电子表格文件等，会以非文本方式传送到后台的，常用来实现文件上传功能。

除了input 类型的控件，还有文本域 textarea ，一种特殊的文本框，它与input 文本输入框的区别就是可以输入多行文字，input 文本输入框是单行的无法输入多行文字。

如下示例：

效果如下：

rows 属性定义文本域的高度是几行，cols 定义文本域宽度占几列，比如上面定义了高10行宽30列的文本域。

下拉菜单作用和单选按钮类似，只不过它更加节省空间，当要选择的选型很多时，就不适合使用radio空间，所以当选项很多的时候，使用下拉菜单，语法如下：

多选列表和多选按钮类似，一样为了节省空间，当数据选项比较多时，使用多选列表，语法如下：

多选比下拉菜单不同之处是多了一个multiple属性，定义多选的，且表现形式也不一样，不是下拉而是一个列表。

如下代码：

显示效果：

这里需要注意的是，多选列表多选时需要按住ctrl键同时鼠标单击选择才能多选，效果如下：

到这里，已介绍了大部分的表单控件，现在你可以使用他们制作自己的表单，表单通常在动态网站中使用，这为以后制作动态网站打下基础。

还有许多属性没有讲到，比如html5新增的一些属性和功能，可自行参考 w3cshool 等网站学习，感谢关注，学习愉快！

上篇 ：

下篇： 前端入门 —— 网页中使用窗口框架

PHP笔记(二) HTML表单

大多数PHP程序都使用HTML表单从用户那里获取数据并计算结果。

• 选择适合于收集的数据类型和提供交互方式的控件。
• 清楚标记每一个控件，这样用户就可以理解其功能。
• 尽可能将标签对齐。将控件的左边缘对齐。
• 将相关的标签分组，并且通过设计中使用空白将每一个分组分开。
• 表单上的控件顺序应该类似于用户操作他们的顺序。

首先创造一个基本的HTML大纲，包含表单控件；然后将控件进行合并（HTML表单必须包括一个提交按钮，用户单击它可以将表单数据发送到服务器。）一个单独的HTML页面可以包含多个表单。

• 创建HTML结构

包含表单的HTML结构和和普通的HTML结构一样。

在包含表单的HTML页面中可以使用任何HTML标签。基本的表单使用FROM标签来说明。该标签中METHOD属性接收GET或POST两个值中的一个。ACTION属性子明PHP脚本的url，该脚本可以收集通过表单收集的数据，可以是绝对路径或者相对路径。

• 合并控件

两个常用的基本控件：文本框和提交按钮。

文本框：允许用户键入信息以发送给PHP脚本。NAME属性为文本提供名称，PHP脚本可以通过名称准确访问其内容，因此它应该是唯一的且符合PHP变量命名规则（但不需要$符号），单标签。VALUE属性指明出现在提交按钮上面的标题。创建方式如下：

提交按钮：允许用户将一个表单的内容发送到服务器，一个HTML表单对应应该有一个提交按钮。

示例：一个完整的HTML表单。

• 使用多个表单

可以在一个HTML页面中包含多个表单，注意下一个表单的FORM开始之前需要结束前一个FORM表单。

• 创建自定义的文本框

文本框的属性中，TYPE和NAME是必须的，其余是可选属性。SIZE属性用于设置文本框的可视大小；MAXLENGTH指明用户键入字符的最大长度；VALUE给出了一个最初显示在文本框中的值。

• 创建文本区域

文本区域可以输入多行文本。NAME和ROWS属性是必须的。ROWS属性表明了文本区域内可以看到的文本行数，充满时会滚动。COLS属性指明可见文本列数与行数类似。WRAP属性指明文本区域内单词换行的方式，可以指定如下值。该标签为双标签。

• 创建密码框

创建密码框的语法与文本框相同，但要将TYPE属性指定为PASSWORD而不是TYPE。

• 创建复选框

取两个值中的一个，即二选一。TYPE属性是必须的，checked属性出现，该复选框默认情况会被选定。value属性指定复选框被选定情况下被发送到服务器的值，默认发送on值。法如下：

• 创建单选按钮

语法与复选框属性含义相同，但是TYPE属性的值必须是RADIO，NAME属性是必须的。

• 创建列表框

用户可以选择一个或者多个选项，它是一个滚动菜单。

name属性是必须的，multipile属性指明用户可以通过按下crtl键并单击多个选项来选择它们

列表框的单选行为可作为单选按钮。

• 创建隐藏域

• 实现上传文件的HTML表单

其中type属性是必须的。格式通过使用MIME码指定。常用的格式如下：

超文本标记语言文本 .html,.html text/html

　　普通文本 ：txt text/plain

　　word文档：application/msword

　　RTF文本 ：rtf application/rtf

　　GIF图形 ：gif image/gif

　　JPEG图形 ：jpeg,

　　jpg： image/jpeg

　　au声音文件：au audio/basic

　　MIDI音乐文件 ：mid,.midi audio/midi,audio/x-midi

　　RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio

　　MPEG文件 .mpg,.mpeg video/mpeg

　　AVI文件 .avi video/x-msvideo

　　GZIP文件 .gz application/x-gzip

　　压缩文件.rar application/octet-stream

　　压缩文件.zip application/x-zip-compressed

　　TA件 .tar application/x-tar

• 使用图像提交数据

• 创建重置按钮

快速了解JavaScript的表单操作

在 HTML 中使用 <form> 表单元素在 JavaScript 中对应的是 HTMLFormElement 类型，而HTMLFormElement继承了HTMLElement接口：

因此，HTMLFormElement 除了与 HTMLElement有一样的属性和方法外，还有自己独有的属性和方法：

• acceptCharset：服务器可以接收的字符集，等价于 HTML 的 accept-charset 属性。
• action：请求的 URL，等价于 HTML 的 action 属性。
• elements：表单中所有控件的 HTMLCollection。
• enctype：请求的编码类型，等价于 HTML 的 enctype 属性。
• length：表单中控件的数量。
• method：HTTP 请求的方法类型，通常是 get 或 post，等价于 HTML 的 method 属性。
• name：表单的名字，等价于 HTML 的 name 属性。
• target：用于发送请求和接收响应的窗口的名字，等价于 HTML 的 target 属性。
• reset()：把表单字段重置为各自的默认值，如果没有默认值，则为空。
• submit()：提交表单。

如果想要获取 <form> 表单元素的引用，需要使用 DOM 选择器进行查找，如 getElementById/getElementsByName/getElementsByClassName/getElementsByTagName/querySelector/querySelectorAll 这些方法，下面使用 getElementById() 方法获取表单，只要给表单设置一个 id 属性即可：

Document中的<form>是document.forms的成员，因此可以通过索引或表单的 name 来访问特定的表单。如下所示：

注意：表单可以同时拥有id和name，且两者可以不相同。

一般情况下，<form>表单元素是通过客户端用户点击的方式发送表单数据。而定义提交按钮主要有：

• 定义使用 type=“submit” 属性值的 <input> 元素，如 <input type=\”submit\” value=\”提交\”>。
• 定义使用 type=\”submit\” 属性值的 <button> 元素，如 <button type=\”submit\”>提交</button>。
• 定义使用 type=\”image\” 属性值的 <input> 元素，如 <input type=\”image\” src=\”submit.gif\”>。

这种方式提交表单会在请求之前触发 submit 事件。这就提供了一个验证表单数据的机会，可以根据验证结果来决定表单是否要提交。如下所示：

调用 preventDefault() 方法可以阻止表单提交。通常，在表单数据无效以及不应该发送到服务器可以这样处理。

也可以调用submit() 方法提交表单，表单中不存在提交按钮也不影响提交。如下所示：

通过 submit() 方法提交的表单，submit 事件不会触发。因此在调用这个方法前要先做数据验证。

表单提交的最大一个问题是可能会提交两次。如果提交表单后没有反应，那么没有耐心的用户可能会多次点击提交按钮。因此，解决这种方法主要有两种：表单提交后禁用按钮，或者通过 onsubmit 事件取消之后的表单提交。

一般用户填写完表单信息后，想要重新填写时，可以使用重置按钮来重置表单。而定义重置按钮主要有：

• 定义使用 type=\”reset\” 属性值的 <input>元素，如 <input type=\”reset\” value=\”重置\”>。
• 定义使用 type=\”reset\” 属性值的 <button> 元素，如 <button type=\”reset\”>重置</button>

重置成功后，表单字段的值会重置为默认值；如果没有默认值，则会为空。

重置按钮可以触发 reset 事件。这个事件为取消重置提供了机会。如下所示：

重置按钮也可以调用 reset() 方法完成重置操作：

但 reset()方法会触发 reset 事件 。

注意：表单设计中通常不提倡重置表单。

表单元素可以像页面中的其它元素一样使用原生 DOM 方法来访问。此外，调用 elements 属性为表单的有序列表，包含表单中所有标签元素的引用，包括<input>、<textarea>、<button>、<select>和<fieldset>元素，并按照在 HTML 中出现的次序保存，通过索引和name属性进行访问。如下所示：

如果多个表单控件使用同一个 name 值，比如 <input>元素设置type=\”radio\”属性为单选，就会返回包含所有同名元素的 HTMLCollection。如下所示：

因此，访问 elements[\”sex\”] 返回的 NodeList 就包含着 3 个元素；而使用索引访问时，就会返回当前位置的元素。如下所示：

除了 <fieldset> 元素以外，所有表单字段都有一组同样的属性。由于 <input> 类型可以表示多种表单字段，因此某些属性只适用于特定类型的字段。除此之外的属性可以在任何表单字段上使用。以下列出了这些表单字段的公共属性和方法。

• disabled：布尔值，表示表单字段是否禁用。
• form：指针，指向表单字段所属的表单。这个属性是只读的。
• name：字符串，这个字段的名字。
• readOnly：布尔值，表示这个字段是否只读。
• tabIndex：数值，表示这个字段在按Tab 键时的切换顺序。
• type：字符串，表示字段类型，如\”checkbox\”、\”radio\”等。
• value：要提交给服务器的字段值。对文件输入字段来说，这个属性是只读的，仅包含计算机上某个文件的路径。

JavaScript 可以动态修改任何属性，当然，form属性除外。如下所示：

动态修改表单字段属性的能力为修改表单提供了方便。如当点击两次提交按钮时，会在第一次提交后，通过监听submit事件来实现禁用提交按钮。如下所示：

以上代码，通过监听 submit 事件，并在函数中获取按钮并设置disabled=true，来达到提交按钮禁用。注意：这个功能不能通过直接给提交按钮添加 onclick 事件进行实现，原因是不同浏览器触发事件的时机不一样。有些浏览器会在触发表单的 submit 事件前先触发 onclick 事件，有些浏览器会后触发 onclick 事件。对于先触发 onclick 事件的浏览器，这个按钮会在表单提交前被禁用，这意味着表单不会被提交。因此，最好使用表单的 submit 事件进行禁用提交按钮。但这种方式不适用于没有提交按钮的表单提交，因为，只有提交按钮才能触发 submit 事件。

type 属性可以用于除<fieldset>之外的任何表单字段。对于<input>元素，这个值等于 HTML 的 type 属性值。对于其他元素，这个 type 属性的值按照下表设置。

对于<input>和<button>元素，可以动态修改其 type 属性。但<select>元素的 type 属性是只读的。

每个表单字段都有两个公共方法：

• focus()：把浏览器焦点设置到表单字段，该字段会变成活动字段并可以响应键盘事件。
• blur()：从元素上移出焦点，焦点不会转移到任何特定元素，仅仅是从调用这个方法的元素上移除。

给一个 focus() 方法的例子：

上述情况就是在页面加载后，把焦点定位到表单中的第一个字段。注意：如果表单中第一个字段是type=\”hidden\”属性的<input>元素，或者该字段被 CSS 属性 display 或 visibility 隐藏，以上代码就会出错。

在 HTML5 中，表单字段增加了 autofocus 属性，支持的浏览器会自动为带有该属性的元素设置焦点，无须使用 JavaScript。如下所示：

为了让之前的代码在使用autofocus时也能正常工作，必须先检测元素上是否设置了该属性。如果设置了 autofocus，就不再调用 focus()：

注意：默认情况下只能给表单元素设置焦点。不过，通过将 tabIndex 属性设置为–1 再调用focus()，也可以给任意元素设置焦点。

再给一个 blur() 的例子：

在浏览器支持 readOnly 属性之前，Web 开发者通常会使用这个方法创建只读字段。现在很少有需要调用blur()的了。

除了鼠标、键盘、变化和HTML 事件外，所有字段还支持以下 3 个事件：

• blur：字段失去焦点时，会触发该事件。
• change：<input>和<textarea>元素的 value 发生变化且失去焦点时触发，或者在<select>元素中选中项发生变化时触发。
• focus：在字段获得焦点时触发。

blur 和 focus 事件是用户手动改变焦点或调用blur/focus方法时触发。change事件是因控件不同而改变触发时机。

• <input> 和 <textarea>：change事件会在字段失去焦点，同时 value 自控件获得焦点后发生改变时触发。
• <select>：change 事件会在用户改变选中项时触发，不需要控件失去焦点。

focus 和 blur 事件通常用于改变用户界面，提供可见的提示或额外功能；change事件通常用于验证用户在字段中输入的内容。比如，有的文本框可能只限于接收数值，focus 事件用来改变控件的背景颜色以便更清楚地表明当前字段获得了焦点，blur 事件用于去掉这个背景颜色，change 事件用于在用户输入了非数值时把背景颜色改为红色。如下所示：

上述代码中，onfocus 事件会把文本框的背景改为黄色，表明是当前活动字段。onblur 和 onchange 事件会在发现非数值字符时把背景改为红色。为测试非数值字符，这里使用了简单的正则表达式来检测文本框的value。这个功能必须同时在 onblur 和 onchange 事件上实现，确保无论文本框是否改变都能执行验证。

注意：blur 和 change 事件的关系并没有明确定义。在某些浏览器中，blur事件会先于 change 事件触发；在其它浏览器中，触发顺序会相反。因此不能依赖这两个事件触发的顺序，必须区分时要多加注意。

HTML 和 ECMAScript 都更新了好几个版本，但是表单几乎从来没有改变。但是，通过 JavaScript 可以增加现有表单字段以提供新功能或增强易用性。也因此，表单字段也暴露了属性、方法和事件供 JavaScript 调用使用。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com