18、前端开发:HTML知识补充——表单标签

简介: 18、前端开发:HTML知识补充——表单标签

1、HTML 表单

表单是一个包含表单元素的区域。


表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表(select)、单选框(radio-buttons)、复选框(checkbox) 等等。


我们可以使用  标签来创建表单:


<form>
input元素
</form>

网页中的表单用于将本地的数据上传至服务器form的属性


action  表单要提交的服务器的地址


多数情况下被用到的表单标签是输入标签 。


输入类型是由 type 属性定义。


2、常用的输入类型

文本域(Text Fields)

       文本域通过  标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。


       实例

<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
</form>

       浏览器显示如下:



1.gif

       注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。


密码字段

       密码字段通过标签  来定义:


实例

<form>
    Password: <input type="password" name="pwd">
</form>

提交按钮(Sumbmit)

       定义了提交按钮。


       当用户单击确认按钮时,表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。


       action 属性会对接收到的用户输入数据进行相关的处理:


       实例


<form name="input" action="html_form_action.php" method="get">
    Username: <input type="text" name="user">
              <input type="submit" value="Submit">
</form>

浏览器显示效果如下:

1.gif

单元按钮(Radio Buttons)

       标签定义了表单的单选框选项:


       实例


<form action="">
    <input type="radio" name="sex" value="male">男<br>
    <input type="radio" name="sex" value="female">女
</form>

       浏览器显示效果如下:

2.png

复选框(Checkboxes)

       定义了复选框。


       复选框可以选取一个或多个选项:


        实例


<form>
    <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
    <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

浏览器显示效果如下:

1.gif

相关文章
|
13天前
|
定位技术
时尚的联系我们表单HTML模板(源码)
一款时尚的联系我们表单Html模板,带地图和所在位置,输入基本信息和信息发送,看起来很漂亮的联系我们页面。
25 1
时尚的联系我们表单HTML模板(源码)
|
11天前
|
移动开发 UED HTML5
HTML 表单和输入7
HTML 表单标签包括 `&lt;form&gt;`、`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;label&gt;`、`&lt;fieldset&gt;`、`&lt;legend&gt;`、`&lt;select&gt;`、`&lt;optgroup&gt;`、`&lt;option&gt;` 和 `&lt;button&gt;` 等,用于创建用户输入界面。HTML5 新增了 `&lt;datalist&gt;`、`&lt;keygen&gt;` 和 `&lt;output&gt;` 标签,增强了表单的功能和用户体验。
|
11天前
HTML 表单和输入6
提交按钮 `&lt;input type=&quot;submit&quot;&gt;` 用于将表单数据发送到服务器。表单的 `action` 属性指定接收数据的服务器文件,而 `method` 属性定义了提交方式(`get` 或 `post`)。`get` 方法将数据附加在 URL 后,适用于非敏感信息;`post` 方法将数据包含在请求体中,适用于敏感数据。示例展示了如何使用这两种方法提交表单。
|
7天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
16 3
|
12天前
HTML 表单和输入5
复选框(Checkboxes)由 `&lt;input type=&quot;checkbox&quot;&gt;` 定义,允许用户选择一个或多个选项。
|
12天前
HTML 表单和输入2
HTML 表单是用于收集用户输入的区域,包含各种表单元素如文本域、下拉列表、单选框和复选框等。使用 `&lt;form&gt;` 标签创建表单,其中包含多个 `&lt;input&gt;` 元素来定义不同的输入类型。
|
12天前
HTML 表单和输入3
HTML 表单中的 `&lt;input&gt;` 标签是最常用的表单元素,其类型由 `type` 属性定义。常见的输入类型包括文本域(`&lt;input type=&quot;text&quot;&gt;`),用于用户在表单中输入字母和数字。
|
12天前
|
数据安全/隐私保护
HTML 表单和输入4
密码字段使用 `&lt;input type=&quot;password&quot;&gt;` 定义,输入的字符会被隐藏为星号或圆点。单选按钮使用 `&lt;input type=&quot;radio&quot;&gt;` 定义,用户只能选择一个选项。
|
12天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
1月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js

热门文章

最新文章