前端入门——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 等网站学习，感谢关注，学习愉快！

上篇 ：

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

前端入门——html 表单

前面已经学习相关html大部分知识，基本上可以制作出简单的页面，但是这些页面都是静态的，一个网站如果要实现用户的互动交流，这时表单就起到关键的作用，表单的用途很多，它主要用来收集用户的相关信息，是网页具有交互的功能。例如，用户注册登录，留言等。

下面会详细介绍表单的使用方法，有以下内容：

  • 表单标签form的使用
  • 表单控件使用

使用<form></form>标签来创建一个表单，在其之间就是各种表单控件，如，输入框，文本框，单选按钮，多选按钮，提交按钮等。

语法代码如下：

1、action —— 处理程序

这里的 action 属性值表单提交的地址，就是表单收集好数据后要传递给远程服务的地址，其地址可以是绝对路径也可以是相对路径，或者其它形式，如发送电子邮件。

使用表单发送电子邮件：

提交到后台程序地址：

2、name —— 表单名称

表单名称，这一属性不是必需的，但是为了防止表单信息提交到后台处理程序时发生混乱，一般要设置一个名称，且在同一页面中最好是唯一的，不要和其它表单重复命名。

3、method —— 传送数据方法

method 属性用来定义处理程序使用那种方法来获取数据信息，常用的有 get 和 post （http 协议定义的方法）。

何时使用 GET？

GET 最适合少量数据或不是很重要数据的提交，浏览器会设定容量限制，默认如何没有设置method 属性，表单则会使用get 方法。

当您使用 GET 时，表单数据在页面地址栏中是可见的，会在表单提交的地址后面跟一个问号“?” ，问号后面是数据，以 名称1=值1&名称2=值2 形式发送到后台程序。

地址栏会看到如下：

关于 GET 的注意事项：

以名称/值对的形式将表单数据追加到 URL

永远不要使用 GET 发送敏感数据！（提交的表单数据在 URL 中可见！）

URL 的长度受到限制（2048 个字符）

对于用户希望将结果添加为书签的表单提交很有用

GET 适用于非安全数据，例如 Google 中的查询字符串

何时使用 POST？

使用post 表单数据和url（表单提交地址）是分开发送的，在页面地址栏中被提交的数据是不可见的，这样安全性更好，用户端会通知服务端获取数据，所以这种情况没有数据长度的限制，缺点是速度会慢些。

关于 POST 的注意事项：

将表单数据附加在 HTTP 请求的正文中（不在 URL 中显示提交的表单数据）

POST 没有大小限制，可用于发送大量数据。

带有 POST 的表单提交后无法添加书签

4、enctype —— 编码方式

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

有以下几种值：

5、target —— 目标显示方式

target 属性规定在何处打开 action URL。表单的目标窗口通常用来显示表单返回的信息，例如是否成功提交了表单，是否出错等。

属性值有以下：

看到这里是不是想的了之前学习超链接时候，a标签也有同样的属性，这里差不多一个意思，只是用途不一样。

这里的窗口有可能是框架 frame 或 浮动窗口 iframe ，后面会讲到框架和浮动窗口，就是在一个页面中可以嵌套一个子窗口。

什么是表单控件，就是收集数据的各种形式控件，比如输入框，密码框，单选、多选按钮，下拉菜单，文本域，文件域，提交按钮等等。

如下代码：

效果如下：

这里显示了一个基本表单，包含了输入框，密码框，单选，下拉菜单，文本域等组件，下面会按其使用类型介绍表单控件。

所有表单控件都一个name属性和vaule属性，用于和其它控件区别，后台程序将会以此名称获取其表单控件对应的vaule值。

下篇会介绍各种表单控件的使用，感谢关注。

上篇：

下篇：

HTML表单及其Input输入类型

HTML 表单用于搜集不同类型的用户输入。HTML5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证，今天将为大家带来HTML中的表单及其input输入类型。

一、HTML表单

1、HTML表单用于收集不同类型的用户输入，是一个包含表单元素的区域并且允许用户在表单中输入内容，比如文本域（textarea）、下拉列表、单选框（radio=buttons）、复选框（checkboxes）等。

2、表单使用标签<form>来设置，示例：

运行结果：

二、HTML表单属性：

1、HTML表单包含表单元素，表单元素是指不同类型的input元素、复选框、单选按钮、提交按钮等。

2、action属性

在上面的示例中出现了action属性，action属性定义在提交表单执行的动作，向服务器提交表单的通常做法是使用提交按钮。

通常，表单会被提交到web服务器上的网页，上面的例子中，则指定了某个服务器脚本来处理被提交表单。

如果省略 action 属性，则 action 会被设置为当前页面。

3、method 属性

method属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）：

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息，使用get。

如果表单正在更新数据，或者包含敏感信息（例如密码），使用post。

4、如果要正确地被提交，每个输入字段必须设置一个 name 属性，示例：

<!DOCTYPE html>

<html>

<body>

<form action=\”/demo/demo_form.asp\”>

First name:<br>

<input type=\”text\” name=\”Firstname\” value=\”Mickey\”>

<br>

Last name:<br>

<input type=\”text\” name=\”lastname\” value=\”Mouse\”>

<br><br>

<input type=\”submit\” value=\”Submit\”>

</form>

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>

</body>

</html>

运行结果：

5、target 属性

target 属性规定提交表单后在何处显示响应，target 属性可设置以下值之一：

默认值为 _self，这意味着响应将在当前窗口中打开。

6、Autocomplete 属性

autocomplete 属性规定表单是否应打开自动完成功能。

启用自动完成功能后，浏览器会根据用户之前输入的值自动填写值，示例：

运行结果：

7、所有<form>属性的列表：

三、HTML表单元素：

1、<input>元素是最重要的表单元素，有很多的形态，根据不同的type属性，例如：

①　文本输入（text），示例：

<!DOCTYPE html>

<html>

<body>

<form>

First name:<br>

<input type=\”text\” name=\”firstname\”>

<br>

Last name:<br>

<input type=\”text\” name=\”lastname\”>

</form>

<p>请注意表单本身是不可见的。</p>

<p>同时请注意文本字段的默认宽度是 20 个字符。</p>

</body>

</html>

运行结果：

②　单选按钮输入（radio），示例：

<!DOCTYPE html>

<html>

<body>

<form>

<input type=\”radio\” name=\”sex\” value=\”male\” checked>Male

<br>

<input type=\”radio\” name=\”sex\” value=\”female\”>Female

</form>

</body>

</html>

运行结果：

③　提交按钮（submit），示例：

<!DOCTYPE html>

<html>

<body>

<form action=\”/demo/demo_form.asp\”>

First name:<br>

<input type=\”text\” name=\”firstname\” value=\”Mickey\”>

<br>

Last name:<br>

<input type=\”text\” name=\”lastname\” value=\”Mouse\”>

<br><br>

<input type=\”submit\” value=\”Submit\”>

</form>

<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>

</body>

</html>

运行结果：

2、<select>元素

<select>元素定义下拉列表，示例：

<!DOCTYPE html>

<html>

<body>

<form action=\”/demo/demo_form.asp\”>

<select name=\”cars\”>

<option value=\”volvo\”>Volvo</option>

<option value=\”saab\”>Saab</option>

<option value=\”fiat\”>Fiat</option>

<option value=\”audi\”>Audi</option>

</select>

<br><br>

<input type=\”submit\”>

</form>

</body>

</html>

运行结果：

3、<fieldset>元素

<fieldset>元素组合表单中的相关数据

<legend>元素为<fieldset>元素定义标题，示例：

<!DOCTYPE html>

<html>

<body>

<form action=\”/demo/demo_form.asp\”>

<fieldset>

<legend>Personal information:</legend>

First name:<br>

<input type=\”text\” name=\”firstname\” value=\”Mickey\”>

<br>

Last name:<br>

<input type=\”text\” name=\”lastname\” value=\”Mouse\”>

<br><br>

<input type=\”submit\” value=\”Submit\”>

</fieldset>

</form>

</body>

</html>

运行结果：

4、<textarea> 元素

<textarea> 元素定义多行输入字段（文本域）、示例：

<!DOCTYPE html>

<html>

<body>

<form>

<textarea name=\”message\” rows=\”10\” cols=\”30\”>

The cat was playing in the garden.

</textarea>

</form>

</body>

</html>

运行结果：

5、HTML5<datalist>元素

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性，示例：

<!DOCTYPE html>

<html>

<body>

<form action=\”/demo/demo_form.asp\”>

<input list=\”browsers\” name=\”browser\”>

<datalist id=\”browsers\”>

<option value=\”Internet Explorer\”>

<option value=\”Firefox\”>

<option value=\”Chrome\”>

<option value=\”Opera\”>

<option value=\”Safari\”>

</datalist>

<input type=\”submit\”>

</form>

</body>

</html>

运行结果：

四、HTML表单输入类型

<input>中的type：

输入限制：

这就是有关HTML表单的大概内容了，希望这篇HTML的表单及其input输入类型的知识点能对大家有所帮助。

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

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科