html的表单标签(上):form标签和input标签

这篇具有很好参考价值的文章主要介绍了html的表单标签(上):form标签和input标签。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

表单标签

表单是让用户输入信息的重要途径。
用表单标签来完成与服务器的一次交互,比如你登录QQ账号时的场景。

html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

表单分成两个部分:

  • 表单域:包含表单元素的区域,用form标签来表示。
  • 表单控件:输入框,提交按钮等,用input标签来表示。

form标签

<form action="test.html">
	... [form 的内容]
</form>

描述了要把数据按照什么方式,提交到那个页面中。

input标签

是一个单标签,各种输入表单控件, 比如单行文本框,按钮, 单选框, 复选框.

  • type(必须有), 取值种类很多,比如button, checkbox, text, file, image, password, radio 等.
  • name: 给 input 标签起了个名字, 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
  • value: input 中的默认值.
  • checked: 默认被选中(用于单选按钮和多选按钮) .
  • maxlength: 设定最大长度.

可以通过对type进行对应的取值,来控制input的类型

单行输入文本框

示例代码:

html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

运行效果:

html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

密码框

示例代码:

html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

运行效果:

html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

单选框

单选框之间必须具备相同的name属性, 才能实现多选一效果

示例代码:
html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

运行效果:

html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

性别<input type="radio" name="gender"><input type="radio" name="gender" checked="checked">

上述代码会默认选择加了checked="checked"的选项,即会默认选择女

性别<input type="radio" name="gender" checked="checked"><input type="radio" name="gender" checked="checked">

如果2个选项都加了checked="checked",默认选择那个选项,取决于浏览器,不同的浏览器有不同的选择。

复选框

示例代码:

html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

运行效果:

html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

普通按钮

按钮通常和 JS 代码搭配使用

示例代码:

html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

运行效果:
html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

提交按钮&清空按钮

提交按钮和清空按钮必须放到 form 标签内。
提交按钮通常情况下,将用户在前端提交的数据提交到服务器上,清空按钮点击后会将 form 内所有的用户输入内容重置。

html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

点击提交之后的效果
html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

重置的效果
html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

选择文件

点击选择文件, 会弹出对话框, 选择文件
示例代码:

html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

运行结果:
1.html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

2.html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生

3.html的表单标签(上):form标签和input标签,前端,html,前端,服务器,学习,程序人生文章来源地址https://www.toymoban.com/news/detail-828164.html

到了这里,关于html的表单标签(上):form标签和input标签的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在前端html页面中向服务器发送post登录请求

    目录 前言 搭建服务器 搭建前端登录页面 获取表单值 使用axios发送post登录请求 前言 一般在html页面中向服务器发送post请求的模块为登录请求,本文将介绍如何向服务器发送post请求 搭建服务器 如何搭建服务器请看JWT认证这篇文章,有详细的解说。这里之所以使用JWT认证是因

    2024年02月08日
    浏览(44)
  • vue中form、table和input标签过长

    form标签过长 效果: 代码:  content是超长显示的内容,disabled是判断是否显示(鼠标放上去,tooltip是否显示全标签内容) ,mouseenter是method方法,判断标签是否超长,你可以根据注释的console.log()语句打印结果,选择适合的大小判断,|message2是过滤器,就是超长后,原表单显示

    2024年02月11日
    浏览(38)
  • 关于 java如何集成chatgpt,如何集成到html5前端界面,如何实现多伦对话,如何申请域名,如何申请服务器,搭建环境(一)

    Java如何集成ChatGPT,如何集成到HTML5前端界面,如何实现多伦对话 随着人工智能技术的不断发展,聊天机器人已经成为了人们日常生活中不可或缺的一部分。ChatGPT是一种基于自然语言处理技术的聊天机器人,它可以通过对话来理解用户的需求,并给出相应的回答。在本文中,

    2024年02月03日
    浏览(75)
  • vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据,动态校验规则】

    本文依旧沿用 ant design vue 组件库和 ts 语言🔥🔥更多内容见Ant Design Vue官方文档 🔥🔥 vue3 antd项目实战——Form表单【后台管理系统 v-model数据的双向绑定,input输入框、Radio单选框的嵌套使用】 在上期文章中,我们完成了 UI界面的渲染 (渲染效果如下图),本期文章将带着大

    2023年04月22日
    浏览(86)
  • HTML基础--Form表单--内联元素

    目录 Form表单 表单元素 创建表单 () 文本输入 () 密码输入 单选按钮 () 和 复选框 () 下拉列表 () 和 选项 ()提交按钮 () 重置按钮 () 块元素与行内元素(内联元素) HTML中的表单( form )是一个重要的元素,它用于收集用户输入的数据,比如文本、选择、单选、复选等。表单是与

    2024年02月08日
    浏览(40)
  • ASP.NET Web Forms - 服务器控件

    服务器控件是服务器可理解的标签。 下面列出的代码是从上一章中复制的: 上面的代码反映出经典 ASP 的局限性:代码块必须放置在您想要输出显示的位置。 通过经典 ASP,想要把可执行代码从 HTML 页面中分离出来是不可能的。这让页面变得难以阅读,也难以维护。 ASP.NET 通

    2024年02月19日
    浏览(37)
  • antd项目中input框的value值不能被修改,form.setFieldsValue 来动态改变表单值

    目录 一、问题描述         1.1、环境         1.2、问题展示          1.3、问题代码展示          1.4、控制台效果         1.5、解释 二、官网解释         官网链接https://ant.design/components/form-cn 三、解决方案         3.1、修改版部分代码       

    2024年02月15日
    浏览(61)
  • linux 服务器出现 Input/output error 处理

    今天突然出现 ls、ss 、 lsof 等命令报错 -bash: /bin/ss: Input/output error 其中有一个服务器上出现提示 *** System restart required *** Last login: Thu Sep 15 12:02:09 2022 from 192.168.0.135 .ssh/rc: 12: .ssh/rc: cannot create /var/log/zabbix-agent/ssh.log: Read-only file system reboot 之后,OK 另一个服务器上更严重 $ sudo

    2024年02月06日
    浏览(58)
  • Java实现以form-data形式文件上传到服务器

    Java实现以form-data形式文件上传到服务器

    2024年02月13日
    浏览(51)
  • Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流

    Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流: Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流_win nginx-rtmp最新版_霸道流氓气质的博客-CSDN博客 Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流: Vue中使用vue-video-player和videojs-flash插件实现播放

    2024年02月03日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包