HTML<form>标签

ops/2025/1/20 15:29:34/
htmledit_views">

例子

具有两个输入字段和一个提交按钮的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.ppmy.cn/ops/151701.html

相关文章

浙江安吉成新照明电器:Acrel-1000DP 分布式光伏监控系统应用探索

安科瑞吕梦怡 18706162527 摘 要&#xff1a;分布式光伏发电站是指将光伏发电组件安装在用户的建筑物屋顶、空地或其他适合的场地上&#xff0c;利用太阳能进行发电的一种可再生能源利用方式&#xff0c;与传统的大型集中式光伏电站相比&#xff0c;分布式光伏发电具有更灵活…

【C++ 类和对象 进阶篇】—— 逻辑森林的灵动精灵,舞动类与对象的奇幻圆舞曲

欢迎来到ZyyOvO的博客✨&#xff0c;一个关于探索技术的角落&#xff0c;记录学习的点滴&#x1f4d6;&#xff0c;分享实用的技巧&#x1f6e0;️&#xff0c;偶尔还有一些奇思妙想&#x1f4a1; 本文由ZyyOvO原创✍️&#xff0c;感谢支持❤️&#xff01;请尊重原创&#x1…

ubuntu24.0安装JDK8-281版本

上传安装包到tmp目录 解压 cd /tmp tar -zxvf jdk-8u281-linux-x64.tar.gz把解压后的文档&#xff0c;移到特定的文件夹。 cd /usr/local mkdir java chmod -R 777 java剪切 mv /tmp/jdk1.8.0_281 /usr/local/java/ cd /usr/local/java ll pwd配置环境变量 编辑 vi ~/.bas…

《贪心算法:原理剖析与典型例题精解》

必刷的贪心算法典型例题&#xff01; 算法竞赛&#xff08;蓝桥杯&#xff09;贪心算法1——数塔问题-CSDN博客 算法竞赛&#xff08;蓝桥杯&#xff09;贪心算法2——需要安排几位师傅加工零件-CSDN博客 算法&#xff08;蓝桥杯&#xff09;贪心算法3——二维数组排序与贪心算…

递归算法学习v2.3

目标和 设置全局变量&#xff1a; class Solution {int ret,path,aim;public int findTargetSumWays(int[] nums, int target) {aim target;dfs(nums,0);return ret;}public void dfs(int[] nums,int pos){if(pos nums.length){if(path aim){ret ;}return;}path nums[pos…

HTML5+Canvas实现的鼠标跟随自定义发光线条源码

源码介绍 HTML5Canvas实现的鼠标跟随自定义发光线条特效源码非常炫酷&#xff0c;在黑色的背景中&#xff0c;鼠标滑过即产生彩色变换的发光线条效果&#xff0c;且线条周围散发出火花飞射四溅的粒子光点特效。 效果预览 源码如下 <!DOCTYPE html PUBLIC "-//W3C//D…

AVL树(C++实现)

目录 1.AVL树的概念 2.AVL树的实现 2.1 AVL树结点的定义 2.2 AVL树的插入 2.3AVL树的旋转 右单旋 左单旋 左右双旋 右左双旋 2.4 AVL树的查找 2.5 AVL树的验证 2.6 AVL树的性能测验 3. 全部代码 1.AVL树的概念 二叉搜索树虽然可以提高我们查找数据的效率&#xf…

Vue项目搭建教程超详细

目录 一. 环境准备 1. 安装node.js 2. 安装Vue cli 二. 创建 Vue 2 项目 1. 命令行方式 2. vue ui方式 一. 环境准备 1. 安装node.js 可参考node.js卸载与安装超详细教程-CSDN博客 2. 安装Vue cli npm install -g vue/cli检查是否安装成功 vue --version Vue CLI …