HTML入门-------form表单

2023-11-01

一.表单概述

表单是可以把用户输入的数据传输到服务器端的HTML元素,然后在后台处理表单传输过来的数据,用来完成与用户之间的各种交互动作。

在网页上由可输入的表单控件,比如文本输入框、密码输入框、单选按钮、多选按钮等。

表单在网页中主要负责收集数据。

二.表单元素

      表单标签是一个双标签,里面包含将数据提交到后台服务器的方法。

<form></form>

 2.1.method属性 

    提交到后台服务器的方法有两种 1.get方法 2.post方法(method属性)

    1.get方法

     使用HTTP get方法向后台服务器发送表单数据,在提交数据之后,它会将各表单控件的“名称/值”显示在地址栏中。这样处理数据,有很大的不安全性,它有可能会泄露用户的相关信息。

<form method="get"> </form>

     2.post方法

    使用HTTP post方法向后台服务器发送来自表单的数据,在提交数据后,它不会将相关信息显示在地址栏中。这个方法有利地保护了用户的信息,降低了信息泄露的机率。

<form method="post"> </form>

      注意:如果没有使用method属性,默认使用HTTP get方法。

2.2.action属性

       action属性的值是一个地址,意思就是当你点击提交按钮后,表单收集到的数据就会传输到该地址,这个地址可以是绝对地址,也可以是相对地址。

<form action="#"> </form>

三.表单输入元素<input>

 在表单中,用户输入数据所需要的文本框、密码框、多选按钮、单选按钮等都是通过input元素来创建的。通常input元素会用到的属性有name、value、size、placeholder、required、autofocus等。

可以通过<input>标签的type属性来指定输入控件的类型,type属性的值有很多。

如文本框(text)、密码框(password)、单选按钮(radio)、多选按钮(checkbox)、提交按钮(submit)、重置按钮(reset)等。

name:该属性是一个必要值,如果要正确地被提交,每个输入字段必须设置一个 name 属性。

value:该属性是为文本框提供初始值,用户会在表单加载后看到该值。

size:该属性可以设置文本框的宽度,是以字符为单位的。size的值不影响用户可以输入的字符量。

placeholder:这个是HTML5新增的一个属性,用来为文本框设置输入提示信息。当文本框处于未输入状态且未获取光标焦点时,会模糊的显示placeholder的值。

required:该属性是设置当你提交表单时,若有未填写的信息,会提示用户必须输入内容。

autofocus:该属性是当表单加载后,会自动获取光标焦点。

文本框与密码框

用户名:<input type="text" name="UserName" value=""请输入用户名" size="20" required autofocus> 
密码:<input type="password" name="PassWord" value=""请输入密码" size="20" required>

单选按钮和多选按钮

<input type="radio" value="男" name="gender" checked="checked">男 
<input type="radio" value="女" name="gender">女	
<input type="checkbox" name="like" value="听音乐">听音乐
<input type="checkbox" name="like" value="体育">体育
<input type="checkbox" name="like" value="看书">看书

提交按钮和重置按钮

<input type="submit" value="提交"/>
<input type="reset" value="重置">

四.textarea标签

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。

<textarea name="name" cols="50" rows="5">这个家伙很懒,什么都没有留下!</textarea>

以上呢就是form表单的基本内容了,想要深入了解的话,可以去W3cshcool在线编程学习哟!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML入门-------form表单 的相关文章

  • CSS 背景在 iOS 中拉伸以填充高度,但滚动上有空白

    这个 CSS 让我的背景在 iOS 中填充 100 的屏幕高度 但有一个小问题 当你向下滚动时 最初有空白 然后当你松开手指并停止滚动时 背景图像会 调整 并填充 100再次屏幕高度的 如果您继续滚动 该问题不会在同一页面上再次出现 只是第
  • HTML5 网站在手机屏幕关闭时运行?

    基本上 我的问题与这个话题 https stackoverflow com questions 15465242 html5 mobile app running while phone screen is off但现在已经是 2018 年
  • height:100% 在 Internet Explorer 中不起作用

    我有一个关于 CSS 属性的问题height 100 在 Internet Explorer 中 height 100 在 IE 中不起作用 但在 Firefox 和 Chrome 中可以 HTML 文件 div ul ul div
  • 如何知道 Solr Optimize 何时完成?

    我正在使用 Solr php client 通过 php 与 Solr 进行通信 这段代码触发solr优化命令 solr gt optimize 请问有没有什么方法可以确定优化完成了 这都是因为我的网站上有一个管理页面 我每天必须手动优化
  • 不透明度如何影响元素顺序?

    我发现 CSS 有一个非常奇怪的行为opacity与浮动元素相结合 考虑以下 HTML div div Right button div div div Overlay div 最后div将覆盖前两个浮动的 删除不透明度会将最新的 div
  • 将 SVG 下载为 PNG 图像

    我想将 HTML 页面中的 SVG 元素下载为 PNG 格式 我尝试了此操作 但下载了一个空白的 PNG 图像 如何将我的 HTML SVG 下载为 PNG 我用过这个https bl ocks org biovisualize 81878
  • JavaScript - 替换 html 字符串中的特定单词索引

    我在 JS 字符串操作方面面临着一项具有挑战性的任务 有一个 HTML 字符串 我需要在其中替换特定单词索引处的单词 单词索引是忽略 HTML 标签时单词的编号 例如 下面是 HTML 字符串 span style font family
  • HTTPS 网站上的 ShareThis 按钮不可点击

    我已将 共享此 按钮添加到我的安全站点 现在单击它们时会产生错误 下面提到了错误 以前有人遇到过这个问题吗 阻止加载混合活动内容 http w sharethis com button buttons js http w sharethis
  • 带有可点击标签的单选按钮组

    根据我收集的信息 为了使单选按钮的标签可单击 您必须为两个元素分配相同的 name 属性值 我遇到的问题是 当您有多个单选按钮时 请说 是或否 类型选择 为了使其到达单击其中一个时 另一个禁用的位置 两个单选按钮的 名称 属性必须具有相同的
  • 如何让html中的文字出现在滚动条上

    您好 我希望当我滚动经过某个文本或滚动到该文本所在的位置时显示该文本 出现时的效果应该有点像网站顶部第一个效果http namanyayg com http namanyayg com 我希望用最少的代码使用纯 CSS 和 JS 来实现效果
  • 占位符 Internet Explorer 11 未显示

    我在 IE 11 中遇到占位符问题 尽管兼容性表中说 IE 11 可以显示占位符 我不是在谈论专注于输入 当我不关注输入框时也没有占位符 IE版本 11 0 9600 我没有在占位符上应用 CSS 在其他浏览器中显示占位符 我还尝试了使用元
  • 使用 CSS 和 JQuery 创建组织结构图结构

    I was checking on stack forum Trees in Twitter Bootstrap https stackoverflow com questions 11167628 trees in twitter boo
  • Z-Index 不起作用 - 替代技术或修复

    我已为固定位置的菜单栏分配了高 z index 但它仍然出现在我网站上其他元素的下方 是否有我可以使用的替代技术或者我编写的代码有问题 我的有问题的网站是here http ninjawarrior info new 注意 向下滚动后需要向
  • 如何在 django 中获取复选框值?

    tr td td tr
  • 如何选择带有空格的类

    我如何选择一个类class boolean optional 我已经尝试过这个 boolean optional CSS boolean optional CSS 正如 Zepplock 所说 这实际上是一个属性中的两个类 boolean
  • Imperavi Redactor 内容未复制到隐藏文本区域

    我正在尝试使用因佩拉维编辑器 http imperavi com redactor 在这里控制我的富文本编辑 div class control group div class controls div div document ready
  • 如何切换整个页面的深色主题?

    我已经成功地在 html 和 Flask 中按下复选框时切换深色主题和浅色主题 但是我怎样才能让深色主题覆盖整个页面 而不仅仅是一些 div 元素呢 边距仍然是浅色主题 CSS代码如下 container display flow widt
  • 更改导航栏悬停时 div 的背景图像

    我正在开发一个项目 我对 Javascript 很陌生 所以我想知道是否有 Jquery 代码或只是一个关于如何使背景图像在导航菜单悬停时更改的过程 例如将鼠标悬停在链接一上会将 div 的背景图像更改为图像 1 将鼠标悬停在链接二上会将
  • 打印html时在页面上打印页码

    我读过很多关于打印页码的网站 但当我尝试打印它时 我仍然无法让它显示在我的 html 页面上 所以 CSS 代码如下 page margin 10 top center font family sans serif font weight
  • 在 Div 的两个顶角创建一个三角形,用边框划分

    通过遵循以下问题和答案 我能够在 div 的右上角获得一个三角形 Div 中的右上角三角形 https stackoverflow com questions 18531959 how to create triangle shape in

随机推荐