实例教程:HTML中的表单

在HTML语言中,表单是很常用的,比如在注册和登陆功能界面上,一般以form标签来定义表单。下面,我们来看看HTML中的表单有哪些主要用法吧。

操作方法

  • 01

    创建一个HTML表单 使用form标签来定义一个HTML表单,在这个定义的区域内编程需要的内容,注意form标签是块级元素,因此会换行。比如我们编写如下代码就表示一个HTML表单,如下所示: <form> </form>

  • 02

    表单的action和method属性 在form标签中还可以定义action 和method 属性,其中action表示该表单要提交的路径,而method表示表单的提交方式,有post和get两种方式。比如编写如下代码: <form action="test2.asp" method="post"> </form>

  • 03

    文本域 (1)编写代码 表单还可以使用input标签,使用type为text来定义文本域,该文本域表示用户可以在该文本区域内输入文字等,比如用户的名称、昵称等就使用文本域来定义,比如编写如下代码: (2)预览效果 在浏览器中预览,可以看到效果如下图所示:

  • 04

    密码域 (1)编写代码 一般在登陆或注册页面都需要使用密码域来定义用户的密码,比如编写代码如下所示: 密 码: <input type="password"> (2)预览效果 然后在浏览器中预览效果,可以看到我们输入的字符都是密文,如下图所示:

  • 05

    提交按钮 (1)编写代码 然后我们来需要定义一个提交按钮,比如编写如下代码: <input type="submit" value="提交"> (2)预览效果 然后在浏览器中预览效果,可以看到一个名称为【提交】的按钮,如下图所示:

  • 06

    添加新项 右击vs页面右侧中的d:\VS文件,在弹出的下拉菜单中选择【添加新项】,如下图所示:

  • 07

    更改名称 在弹出的窗口中,找到【名称】,然后在右侧中更改名称为【test2.aspx】,然后点击【添加】按钮,如下图所示:

  • 08

    预览效果 然后重新预览效果,可以看到在表单中输入字符之后,点击【提交】按钮,会更新页面,将表单提交给test2页面,但是由于test2页面没有对提交来的表单做出动作,因此,test2内容不会发生变化,如下图所示:

(0)

相关推荐

  • 手机版搜狗浏览器中的表单密码数据如何清除

    今天给大家介绍一下手机版搜狗浏览器中的表单密码数据如何清除的具体操作步骤.1首先解锁手机,找到桌面上的搜狗浏览器APP,打开.2. 如图,进入主页面后,点击右上角的三横图标.3. 在下方打开的页面,点 ...

  • 如何启用福昕阅读器中的表单自动完成功能

    今天给大家介绍一下如何启用福昕阅读器中的表单自动完成功能的具体操作步骤.1.打开偏好设置1. 以"福昕阅读器领鲜版"为例,打开之后,如图,点击左上角的"文件"选 ...

  • html中table表单如何应用?

    html中table表单如何应用?我们这边以条款案例来说明 操作方法 01 如图所示先写外边框的内容.<table></table>中align="center&qu ...

  • HTML中的表单

    表单结构,文本栏.密码栏.隐藏栏.复选栏.单选栏.窗体栏位.区块栏位.按钮.图像按钮.允许上传文件.表单的外框和标题.元件的次序和快捷键. 操作方法 01 表单结构: <form>...& ...

  • 如何在网页中嵌入表单

    作为一个运营人员,你可能需要将表单分享到其他比如官网.微信公众号.微博等渠道来与用户互动.那么除了通过设置文字/图片的超链接跳转到表单地址外,还可以将表单直接嵌入到网页,这样用户浏览你的官网时,即可直 ...

  • 9个新人容易中枪的表单设计问题

    在网站中,表单是用户跟我们沟通的主要桥梁.透过表单,用户可以买东西.订阅新文章.更新资料--可以说网站最重要的功能,都是靠表单来完成.然而这个跟顾客打交道的重要环节,我们真的有做好了吗?以下分享的是一 ...

  • 易企秀、we+、兔展等H5制作工具表单教程合集

    H5这个由HTML5简化而来的词汇,正通过微信广泛传播.H5是集文字.图片.音乐.视频.链接等多种形式的展示页面,丰富的控件.灵活的动画特效.强大的交互应用和数据分析,高速低价的实现信息传播,非常适合 ...

  • 如何利用ionic框架编写表单控件

    ionic框架中有表单控件,有input.textarea等.表单是网页中常用的控件,用于用户输入.选择,便于录入数据到数据库中.表单对应的是Form,包含了input.textarea.select ...

  • 学习html制作网页:表单试题及代码

    HTML中的表单大多数用form表单来收集用户的数据,将用户填写的数据通过get或者post的方式传递出去,下面简单介绍form表单中的几种常见的标签 操作方法 01 新建一个HTML文件,命名为my ...