当前位置: 首页 > article >正文

HTML<form>标签

例子

具有两个输入字段和一个提交按钮的HTML表单:

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

下面有更多“自己尝试”的示例。

定义和用法

<form>标签用于创建供用户输入的 HTML 表单。

<form>元素可以包含下列一个或多个表单元素:

<输入>
<文本区域>
<按钮>
<选择>
<选项>
<选择组>
<字段集>
<标签>
<输出>

浏览器支持

属性

全局属性

<form>标签支持HTML中的全局属性。

事件属性

<form>标签支持HTML中的事件属性。

更多示例

例子

带有复选框的HTML表单:

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" name="vehicle3" value="Boat" checked>
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form>

例子

带有单选按钮的HTML表单:

<form action="/action_page.php" method="get">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS" checked="checked">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

默认CSS设置

<form>大多数浏览器将使用以下默认值显示该元素:

例子

form {
  display: block;
  margin-top: 0em;
}


http://www.kler.cn/a/514452.html

相关文章:

  • 微服务学习-Gateway 统一微服务入口
  • Excel 技巧15 - 在Excel中抠图头像,换背景色(★★)
  • adb 命令使用大全
  • Pix2Pix:图像到图像转换的条件生成对抗网络深度解析
  • 基于python的博客系统设计与实现
  • 零信任安全理念
  • suctf2025
  • Java 中 final 关键字的奥秘
  • 锐捷路由器网关RG-NBR6135-E和锐捷交换机 Ruijie Reyee RG-ES224GC 电脑登录web方法
  • IDEA导入Maven工程不识别pom.xml
  • 5G/4G+北斗三号水利遥测终端机RTU-打造水利工程的智能核心
  • Azure面试
  • PHP语言的语法糖
  • Java 设计模式 二 单例模式 (Singleton Pattern)
  • STM32学习9---EXIT外部中断(理论)
  • qiankun+vite+vue3
  • spring security StackOverflowError 问题解决
  • 腾讯云AI代码助手评测:如何智能高效完成Go语言Web项目开发
  • Nginx部署Vue项目添加访问后缀
  • LDN的蓝牙双模键盘帮助文档
  • pytorch 多机多卡训练方法
  • 数据恢复常用方法(三)如何辨别固态硬盘故障类型
  • 蓝桥杯 单词重排
  • 鸿蒙Flutter实战:17-无痛上架审核指南
  • NPM简介
  • Linux计划任务(crontab)