web前端之表单（八）------表单

最新推荐文章于 2024-04-08 20:38:50 发布
最新推荐文章于 2024-04-08 20:38:50 发布
阅读量798 收藏 1
点赞数 1
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq939782569/article/details/68489815
版权 
1、最简单的表单
<!DOCTYPE html>
<html>
  <head>
    <title>biaodan1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--普通文本-->

  </head>

  <body>
    <form action="">
        username:<input type="text" name="username"><br>
        password:<input type="text" name="password">
    </form>
    <p><b>注意：</b>表单本身是不可见。并且注意一个文本字段的默认宽度是20个字符。</p>
  </body>
</html>

2、表单提交账号密码，密码不可见

<!DOCTYPE html>
<html>
  <head>
    <title>biaodan1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--普通文本-->

  </head>

  <body>
    <form action="">
        username:<input type="text" name="username"><br>
        password:<input type="password" name="password">
    </form>
    <p><b>注意：</b>表单本身是不可见。并且注意一个文本字段的默认宽度是20个字符。</p>
  </body>
</html>

3、单选框

<!DOCTYPE html>
<html>
  <head>
    <title>biaodan1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--单选框-->

  </head>

  <body>
    <form action="">
        <input type="radio" name="sex" value="male">Male<br>
        <input type="radio" name="sex" value="female">Female
    </form>
    <p><b>注意：</b>当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。</p>
  </body>
</html>

4、多选框

<!DOCTYPE html>
<html>
  <head>
    <title>biaodan1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--多选框-->

  </head>

  <body>
    <form action="">
        <input type="checkbox" name="vehicle" value="bike">I have a bike<br>
        <input type="checkbox" name="vehicle" value="Car">I have a car
    </form>
    <p><b>注意：</b>可以多选</p>
  </body>
</html>

5、下拉框

<!DOCTYPE html>
<html>
  <head>
    <title>biaodan1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--下拉框-->

  </head>

  <body>
    <form action="">
    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>
    </form>
  </body>
</html>

6、下拉预选框

<!DOCTYPE html>
<html>
  <head>
    <title>biaodan1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--下拉框,预选框-->

  </head>

  <body>
    <form action="">
    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected>Fiat</option>
    <option value="audi">Audi</option>
    </select>
    </form>
  </body>
</html>

7、文本框

<!DOCTYPE html>
<html>
  <head>
    <title>biaodan1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--文本域-->

  </head>

  <body>
    <textarea rows="10" cols="30">
         我是一个输入文本框
    </textarea>
  </body>
</html>

8、按钮

<!DOCTYPE html>
<html>
  <head>
    <title>biaodan1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--按钮-->

  </head>

  <body>
    <form action="">
        <input type="button" value="Hello world">
    </form>
  </body>
</html>

9、带边框的表单

<!DOCTYPE html>
<html>
  <head>
    <title>biaodan1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--带边框的表单-->

  </head>

  <body>
    <form action="">
    <fieldset>
        <legend>Personal information:</legend>
        Name:<input type="text" size="30"><br>
        E-mail:<input type="text" size="30"><br>
        Date of brith:<input type="text" size="10">
    </fieldset>
    </form>
  </body>
</html>

10、待提交的表单

<!DOCTYPE html>
<html>
<head>
<title>biaodan1.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--带边框的表单-->

</head>

<body>
    <form action="www.baidu.com">
        First name: <input type="text" name="FirstName" value="Mickey"><br>
        Last name: <input type="text" name="LastName" value="Mouse"><br>
        <input type="submit" value="提交">
    </form>
    <p>点击"提交"按钮，表单数据将被发送到服务器上的www.baidu.com</p>
</body>
</html>
学习资料-Web前端概述.md
04-20
Web前端技术是构建现代网页和用户界面的核心技术之一，它主要负责网站或网页的外观展示和用户交互。前端工程师需要掌握HTML、CSS和JavaScript等技术来实现一个功能完备、用户友好的网页。本文档提供了Web前端技术的...
Java中HTML的列表标签
qq_56299755的博客
12-11 163
Java中HTML的列表标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表标签</title> </head> <body> <!-- ur 是无序列表 type属性可以修改列表项前面的符号 li 是列表项
web表单（详解）
m0_52896041的博客
11-29 4263
web表单（详解）
java web笔记3：html的列表标签，超链接标签，表格标签，表单标签
qq_46617150的博客
01-17 722
表单标签 表格标签 超链接标签 列表标签
web前端技术——三、表单
qq_46007633的博客
03-23 4335
表单概述与表单标签 input表单域 多行文本框和列表选择框 按钮与表单分组
HTML笔记（二）
qwq_666的博客
12-18 439
表单 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单form</title> </head> <body> <!-- 1.表单有什么用？ 收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器 2.如何画表单 使用form标签画表单 3.一个网页当中可以有多个表单
WEB前端开发-案例汇总(81例).zip
05-08
《WEB前端开发-案例汇总(81例)》是一个丰富的前端学习资源库，包含了81个不同的实战案例，旨在帮助初学者逐步进阶，并为有经验的开发者提供设计和参考。这个压缩包中的每个文件代表一个独立的项目，涵盖了前端开发的...
Web-前端html+css从入门到精通 127 表单扩展之美化控件.zip
05-23
本课程“Web-前端html+css从入门到精通 127 表单扩展之美化控件”主要聚焦于如何使用HTML和CSS来创建美观且功能强大的表单控件。 HTML表单是网页上用于收集用户输入信息的重要元素，常见的如文本框、密码框、复选框...
JavaScript案例-js表单验证
02-16
JavaScript是Web开发中不可或缺的一部分，尤其在前端领域，它承担着与用户交互、动态更新页面以及数据验证等重要任务。本案例重点聚焦于JavaScript在表单验证中的应用，旨在帮助开发者掌握如何使用纯JavaScript实现...
Web-前端html+css从入门到精通 131. 表单扩展之标签.zip
05-23
表单扩展之标签”专注于讲解如何利用HTML表单元素以及相关的CSS样式来创建功能丰富的用户交互界面。下面我们将深入探讨这一主题中的关键知识点。 一、HTML表单基础 HTML表单是网页中用于收集用户输入信息的重要...
html表单
cjxs_的博客
10-07 408
html表单
【Web前端笔记03】表单
qq_45498824的博客
02-04 3078
目录 章节03 表单 一、Form表单 二、表单元素 1、表单 2、表单元素 三、HTML5 新增 type 类型 1、email 2、url 3、search 4、tel 5、color 6、number 7、range 8、date 9、month 10、year 四、HTML5 新增属性 1、autofocus属性 2、multiple属性 3、placeholder属性 4、required属性 五、实体字符 章节03 表单 一、Form表单...
前端HTML入门基础5（表单）
最新发布
qq_51752841的博客
04-08 1606
在HTML中，表单（Forms）是一种允许用户与网页交互的界面元素，常用于收集用户输入、提交数据到服务器等。此外，随着HTML5的发展，在上面的示例中，我们创建了一个简单的登录表单，包括用户名和密码输入框以及一个提交按钮。显而易见就是能隐藏起来的看不见的，一般用于防止恶意书写脚本批量的执行一些功能。在HTML中通常用于收集用户较长的文本输入，如留言、评论或者是文章内容等。正确设计和实现HTML表单对于确保良好的用户体验和数据的准确收集至关重要。fieldset和legend是HTML中用于创建表单的标签。
前端——表单总结
qq_53935542的博客
07-24 1207
1、HTML表单用于收集不同类型的用户的输入2、HTML表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到Web服务器。
web 前端开发Form表单
2301_79951760的博客
02-08 1630
表单在web网页中用来给用户填写信息，从而能采用用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来填写，如登陆注册、搜索框表单是由容器和控件组成的，一个表单一般应该包含用户填写信息的输入框，提交按钮等，这些输入框，按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。
【Web 表单】与用户数据打交道-1(mdn笔记)
cxyhjl的博客
07-31 1008
0. Web 表单指南我们将介绍 Web 表单的各个方面：HTML 结构、样式、验证表单数据，以及提交数据到服务器。基本指南你的第一个表单第一次创建 HTML 表单的经验，包括设计一个简单表单、使用正确的 HTML 元素实现它、通过 CSS 添加一些非常简单的样式，以及如何将数据发送到服务器。如何构造 HTML 表单用于为表单的不同部分提供结构和意义的元素。不同的表单控件原生表单控件了解原始 HT...
Web前端-HTML（表格与表单）
apple_73204060的博客
12-14 2339
表格与表单
Web前端之表格
花&败
10-29 6250
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格在table中使用tr表示表格中的一行，有几个tr就有几行在tr中使用td表示一个单元格，有几个td就有几个单元格rowspancolspan。
前端简洁表单模型
程序员成长指北
01-04 227
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群今天想和大家浅谈下前端表单的简洁模型。说起表单大家一定都不陌生，因为各自团队内部一定充斥着各种或简单或复杂的表单场景。为了解决表单开发问题，市面上也有着许多优秀的表单解决方案，例如：Formily[1]、Ant Design[2]、FormRender[3] 等。这些框架的底层都维护着一套基础的...
Web前端设计与开发技术-第7章制作表单页面完整
Web前端设计与开发技术-课件-第7章制作表单页面完整.pptx；Web前端设计与开发技术-课件-第7章制作表单页面完整.pptx；第7章制作表单页面7.1表单的基础知识7.2表单标签7.3表单对象7.4表单按钮7.5上机练习表单——QQ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值