广告
返回顶部
首页 > 资讯 > 前端开发 > html >html中表单标签怎么用
  • 234
分享到

html中表单标签怎么用

2024-04-02 19:04:59 234人浏览 独家记忆
摘要

这篇文章主要介绍html中表单标签怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 4-1 表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的

这篇文章主要介绍html中表单标签怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

4-1

表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

语法:

<fORM method="传送方式" action="服务器文件">

讲解:

1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。

2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method : 数据传送的方式(get/post)。

4-2

<input>输入框

文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。

语法:

<form>

<input type="text/passWord" name="名称" value="文本" />

</form>

1、type:

当type="text"时,输入框为文本输入框;

当type="password"时, 输入框为密码输入框。

2、name:为文本框命名,以备后台程序ASP 、PHP使用。

3、value:为文本输入框设置默认值。(一般起到提示作用)

4-3

文本域,支持多行文本输入

当用户需要在表单中输入大段文字时,需要用到文本输入域。

语法:

<textarea rows="行数" cols="列数">文本</textarea>

1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

2、cols :多行输入域的列数。

3、rows :多行输入域的行数。

4-4

单选框,复选框

语法:

<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

1、type:

当type="radio"时,控件为单选框

当type="checkbox"时,控件为复选框

2、value:提交数据到服务器的值(后台程序PHP使用)

3、name:为控件命名,以备后台程序ASP、PHP使用

4、checked:当设置checked="checked"时,该选项被默认选中

注意:同一组的单选按钮,name取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。

4-5

下拉列表框,节省空间

下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。

语法:<option value="提交值">选项</option>

提交值是向服务器提交的值,选项是显示的值。

<form action="save.php" method="post" >

<label>爱好:</label>

<select>

<option value="看书">看书</option>

<option value="旅游" selected="selected">旅游</option>

<option value="运动">运动</option>

<option value="购物">购物</option>

</select>

</form>

4-6

使用下拉列表框进行多选

下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,

就可以实现多选功能,进行多选时按下Ctrl键同时进行单击,可以选择多个选项。

如下代码:

<form action="save.php" method="post" >

<label>爱好:</label>

<select multiple="multiple">

<option value="看书">看书</option>

<option value="旅游">旅游</option>

<option value="运动">运动</option>

<option value="购物">购物</option>

</select>

</form>

4-7

在表单中有两种按钮可以使用,分别为:提交按钮、重置。

1,提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。

语法:

<input type="submit" value="提交">

type:只有当type值设置为submit时,按钮才有提交作用

value:按钮上显示的文字

2,重置按钮,重置表单信息

当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

语法:

<input type="reset" value="重置">

type:只有当type值设置为reset时,按钮才有重置作用

value:按钮上显示的文字

以上是“html中表单标签怎么用”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网html频道!

--结束END--

本文标题: html中表单标签怎么用

本文链接: https://www.lsjlt.com/news/92942.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • html中表单标签怎么用
    这篇文章主要介绍html中表单标签怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 4-1 表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的...
    99+
    2022-10-19
  • html表单标签怎么用
    这篇文章主要介绍html表单标签怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!表单标签:form<form> 表单标签,在html页面创建一个表单,表单标签在浏览器...
    99+
    2022-10-19
  • HTML中的表单标签怎么用
    这篇文章主要介绍了HTML中的表单标签怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。form标签定义提交方式、提交地址、表单字符集以及...
    99+
    2022-10-19
  • Html中<form>表单标签元素怎么用
    这篇文章主要介绍Html中<form>表单标签元素怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Html form 表单区域标签元素一、Form表单区域标签语法与结...
    99+
    2022-10-19
  • html中有哪些表单标签
    这篇文章主要介绍html中有哪些表单标签,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!html表单标记:“<form>”、“<input>”、“<textarea>”、“<l...
    99+
    2023-06-15
  • html表格标签怎么用
    小编给大家分享一下html表格标签怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 在网页制作之中,表格标签是常用的标签之...
    99+
    2022-10-19
  • HTML中的表格标签怎么用
    这篇文章主要介绍了HTML中的表格标签怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。table标签和tr标签,th标签和td标签,合并...
    99+
    2022-10-19
  • html表单标签有哪些
    HTML中常用的表单标签有以下几种:1. `<input>`:用于接收用户输入的各种类型数据,比如文本、密码、复选框、单选按钮等。2. `<textarea>`:用于多行文本输入。3. `<select&g...
    99+
    2023-08-09
    html
  • html中表单的标签是哪个
    这篇文章给大家分享的是有关html中表单的标签是哪个的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。html有什么特点1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。2、...
    99+
    2023-06-14
  • SpringMVC表单标签怎么使用
    这篇文章主要讲解了“SpringMVC表单标签怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“SpringMVC表单标签怎么使用”吧!使用Spring MVC提供的表单标签可以让JSP...
    99+
    2023-07-05
  • HTML5中form表单标签怎么使用
    这篇文章主要介绍了HTML5中form表单标签怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML5中form表单标签怎么使用文章都会有所收获,下面我们一起来看看吧。...
    99+
    2022-10-19
  • html表单中如何使用<label>标签
    这篇文章将为大家详细讲解有关html表单中如何使用<label>标签,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。html form <label>...
    99+
    2022-10-19
  • HTML表格标签元素怎么用
    这篇文章主要介绍了HTML表格标签元素怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML表格标签元素怎么用文章都会有所收获,下面我们一起来看看吧。一、table表格语...
    99+
    2022-10-19
  • Html中的<textarea>表单文本区域标签元素怎么用
    小编给大家分享一下Html中的<textarea>表单文本区域标签元素怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一...
    99+
    2022-10-19
  • html有序列表标签怎么使用
    这篇文章主要介绍了html有序列表标签怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇html有序列表标签怎么使用文章都会有所收获,下面我们一起来看看吧。一、ol li有...
    99+
    2022-10-19
  • HTML中label标签怎么用
    这篇文章给大家分享的是有关HTML中label标签怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。html的label是一种标签,用于为input元素定义标注或标记;label元素不会向用户呈现任何特殊效果;...
    99+
    2023-06-06
  • html中ol标签怎么用
    这篇文章将为大家详细讲解有关html中ol标签怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 在html中,ol标签用于定义一个有序列表...
    99+
    2022-10-19
  • HTML中i标签怎么用
    这篇文章给大家分享的是有关HTML中i标签怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。     HTML<i>标签   &n...
    99+
    2022-10-19
  • HTML中iframe标签怎么用
    小编给大家分享一下HTML中iframe标签怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   在这里首先介绍的是HTM...
    99+
    2022-10-19
  • HTML中dfn标签怎么用
    小编给大家分享一下HTML中dfn标签怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!     HTM...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作