day06-表单标签及属性

news2025/7/11 10:42:05

文章目录

      • 一、知识回顾:
      • 二、单元内容
      • 6.1 表单标签
        • 6.1.1 表单标签 ``
            • 生活中的表单:
            • 网页中的表单:
            • 程序员中的表单:
            • 运行结果:
      • 6.2 表单标签的输入标记
        • 6.2.1 表单的文本框和密码框输入标记及提示信息属性
            • 文本框 ``
            • 密码框
        • 6.2.2 表单的单选框输入标记及默认被选中属性
            • 单选框
        • 6.2.3 表单的复选框输入标记及默认被选中属性
            • 复选框
        • 6.2.4 表单的文件域输入标记
            • 文件域
        • 6.2.5 普通按钮及文字改动属性、提交按钮、重置按钮
            • 按钮
        • 6.2.6 日期的输入标记
            • 日期
        • 6.2.7 文本域输入标记设置
            • 文本域
        • 6.2.8 表单案例练习
      • 6.3下拉菜单
        • 6.3.1 下拉菜单标签及属性``
            • 下拉菜单
        • 6.3.2 下拉菜单练习
            • 题目:
            • 答案
      • 6.4 课下作业:
      • 表单综合案例练习
            • 题目:
            • 答案:

一、知识回顾:

  • 5.1 表格的三对标签

  • 5.2 表格标签的属性

  • 5.3 行标签的属性

  • 5.4 单元格标签的属性

二、单元内容

  • 6.1 表单标签(重点)

  • 6.2 表单标签的输入标记(难点)

  • 6.3下拉菜单(重点)

6.1 表单标签

6.1.1 表单标签 <form></form>

现实中的表单,类似我们填的单子。目的是为了收集用户信息。在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单。

生活中的表单:

在这里插入图片描述

网页中的表单:

在这里插入图片描述

程序员中的表单:

<form  method="post" action="result.html">
       <!--(规定如何发送表单数据      常用值:get|post)-->
     <!--action="result.html">-->
    <!--(表示向何处发送表单数据)-->
    <p>  名字:<input name="name" type="text" >  </p>
    <p>  密码:<input name="pass" type="password" >  </p>

    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填"/>
   </p>
</form>
运行结果:

在这里插入图片描述

课堂互动:提出问题谈谈对表格的理解,主动回答问题的三个同学加分,

找到网页中出现的表格。本周加分最高的同学可以得到奖励哦!。

6.2 表单标签的输入标记

6.2.1 表单的文本框和密码框输入标记及提示信息属性

文本框 <input/>

定义:

​ 文本域通过 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。

语法:文本框:<input type=“text”(文本框) >

​ 密码框:<input type=“password”(密码框) >

<input  type="text"(文本框)  name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />

运行结果

密码框

定义:

密码字段通过标签<input type="password"> 来定义

注意:密码字段字符不会明文显示,而是以星号或圆点替代。

语法:

<input  type="password"(密码框)  name="pass"(密码框的名称)  size="20"(密码框的长度) />

在这里插入图片描述

游戏中的应用:

在这里插入图片描述

课堂互动:使用随机点名的方式选择切换屏幕共享浏览学生代码,完成的同学给予个人加分。

6.2.2 表单的单选框输入标记及默认被选中属性

单选框

定义:

<input type="radio"> 标签定义了表单单选框选项

当用户点击一个单选按钮时,它就会被选中,其他同名的单选按钮就不会被选中。

语法:<input type=“radio”(单选按钮框) name=“a” >

​ *单选框中的name值必须相同才能单选

​ checked 单选默认被选中属性


<input name="gen" type="radio"(单选按钮框) value=""(值)  checked(单选按钮选中状态)  /><input name="gen" type="radio" value="" />

运行结果:

在这里插入图片描述

游戏中的应用:

在这里插入图片描述

课堂互动:每组抽取一个同学来谈谈自己对单选框的理解并且写出来,班级同学做评委评选出一个说的最好的,并且在聊天区齐刷666和鼓掌

6.2.3 表单的复选框输入标记及默认被选中属性

复选框

定义:

定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项

语法:<input type=“checkbox”(复选框)>

​ checked(复选框选中状态)

<input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动
<input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天
<input type="checkbox" name="interest" value="play"/>玩游戏

运行结果:

在这里插入图片描述

游戏中的应用:

在这里插入图片描述

课堂互动:每组抽取一个同学来谈谈自己对单选框的理解并且写出来,班级同学做评委评选出一个说的最好的,并且在聊天区齐刷666和鼓掌

6.2.4 表单的文件域输入标记

文件域

定义:

文件上传是网站中常见的功能,例如网盘文件上传和邮箱上传文件。在网盘、论坛等,用户需要经常上传图片给服务器,用来改变用户在不同网站上的形象图片。

语法:

<form action="" method="post" enctype="multipart/form-data"(表单编码属性)>
  <p><input type="file"(文件域) name="files" />
  <input type="submit" name="upload" value="上传" /></p>
</form>

运行结果:

在这里插入图片描述

课堂互动:

找出网页中出现传文件的案例!

6.2.5 普通按钮及文字改动属性、提交按钮、重置按钮

按钮

定义:

<input type="submit"> 定义了提交按钮.

当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

语法:


<input type="reset" (重置按钮) name="butReset"  value="reset按钮"(按钮上显示的文字)>
<input type="submit"(提交按钮) name="butSubmit" value="submit按钮">
<input type="button"(普通按钮) name="butButton" value="button按钮"/>
<input type="image" src="images/login.gif">(图片按钮)


运行结果:

在这里插入图片描述

在这里插入图片描述

6.2.6 日期的输入标记

日期

定义:

HTML5定义了几个与日期有关的新控件。支持日期控件的浏览器会提供一个方便的下拉式日历,供用户选择。

语法:

<form action="">
    生日:<input type="date" name="bday">

</form>

运行结果:

在这里插入图片描述

6.2.7 文本域输入标记设置

文本域

定义:

用户可在文本域中写入文本。可写入字符的字数不受限制。

语法:

<textarea(多行文本域)  name="showText"  cols="x"(显示的列数)  rows="y"(显示的行数)>文本内容 </textarea>

运行结果:

在这里插入图片描述

游戏中的应用:

在这里插入图片描述

课堂互动:

​ 每组抽取一个同学来谈谈自己对文本域的理解并且写出来

6.2.8 表单案例练习

题目:

在这里插入图片描述

答案:

<form name="form1">
    <input type="text" placeholder="Text" name="text1" /><br>
    <input type="password" placeholder="password" name="password" /><br>
    <textarea placeholder="Textarea" name="textarea" style="resize:none"> </textarea><br>
    <input type="file" name="file" /><br>
    <input type="radio" name="Option" value="Option1" />Option 1
    <input type="radio" name="Option" value="Option2" />Option 2
    <input type="checkbox" name="check" value="Option1" />Option 1
    <input type="checkbox" name="check" value="Option2" />Option 2

    <input type="submit" value="Submit" />
    <input type="reset" value="Reset"/>
    <input type="button" value="button" >
</form>

6.3下拉菜单

6.3.1 下拉菜单标签及属性<select></select>

下拉菜单

语法:

在这里插入图片描述

<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>

运行结果:

在这里插入图片描述

游戏中的应用:
在这里插入图片描述

课堂互动:

每组抽取一个同学来谈谈自己对下拉框的理解并且写出来

6.3.2 下拉菜单练习

题目:

在这里插入图片描述

答案
<select name="lesson">
    <option value="">== 选择课程 ==</option>
    <optgroup label="后台">
        <option value="php">PHP</option>
        <option value="linux">LINUX</option>
        <option value="mysql">MYSQL</option>
    </optgroup>
    <optgroup label="前台">
        <option value="php">HTML</option>
        <option value="linux">JAVASCRIPT</option>
        <option value="mysql">CSS</option>
    </optgroup>
</select>

游戏中的应用:


在这里插入图片描述

今日单词总结

在这里插入图片描述

6.4 课下作业:

表单综合案例练习

题目:

在这里插入图片描述

答案:
<form action="http://www..." method="get">
<p>
<label>姓名:</label><input type="text" name="username" />
</p>
<p>
<label>密码:</label><input type="password" name="password" />
</p>
<p>
<label>性别:</label>
<input type="radio" name="gender" value="0" /><input type="radio" name="gender" value="1" /></p>
<p>
<label>爱好:</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片:</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述:</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯:</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/109388.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

疫情之下,文科生转行学编程靠不靠谱?

毕业季越来越近了&#xff0c;突发的疫情将可能让2023年成为最难就业年&#xff01;居危思变&#xff0c;在大环境不好的背景下&#xff0c;很多毕业生都准备暂时先不考虑就业&#xff0c;而是继续加强技能学习&#xff0c;待形势好转再继续找工作&#xff01;而说起当前各行业…

【蓝桥杯】第10届Scratch国赛第6题程序1 -- 捉迷藏

[导读]:蓝桥杯大赛是工业和信息化部人才交流中心举办的全国性专业信息技术赛事。蓝桥杯大赛首席专家倪光南院士说:“蓝桥杯以考促学,塑造了领跑全国的人才培养选拨模式,并获得了行业的深度认可。” 春雷课堂计划推出Scratch蓝桥杯真题解析100讲,这是春雷老师解读Scratch蓝…

Vue3组件化开发(⼀)(二) | webpack

文章目录Vue3组件化开发&#xff08;⼀&#xff09;&&#xff08;二&#xff09;Vue3的表单和开发模式v-model的基本使用原理vue的开发模式浅学webpackwebpack基础打包认识webpackwebpack安装基本打包webpack局部安装和打包webapck 依赖图css-loaderstyle-loaderless-loade…

Word控件Spire.Doc 【超链接】教程(8):在 C#/VB.NET 中链接到 Word 文档中的书签

Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下&#xff0c;轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具&#xff0c;专注于创建、编辑、转…

如何给视频添加水印?这三个加水印的方法让你实现

水印其实就是一种标记&#xff0c;例如公司的名称、品牌名称或者logo&#xff0c;它可以给我们制作的东西起到保护版权的作用&#xff0c;除此之外&#xff0c;它还能起到品牌宣传的作用。所以很多人在发布视频之前&#xff0c;都会在视频上面添加一个或多个专属的水印&#xf…

经验:工具在接口测试中发挥什么样的作用?

接口测试究竟是什么&#xff1f;为什么要用接口测试&#xff1f;它有哪些工具呢&#xff1f;这一连串的问题敲击着我们&#xff0c;请带着这些问题&#xff0c;在本文中寻找答案&#xff0c;我将为您打开接口测试的大门。 1 初探接口测试 接口测试是什么。它检查数据的交换&a…

准备了1个月,面试字节跳动测试工程师“凉经”分享

3月份参加了字节跳动测试工程师的面试&#xff0c;前几天收到的字节跳动测试工程师的拒信&#xff0c;我再一次被扔到人才库了 我此时的心情就是很复杂就是从3月份中旬&#xff0c;我得知我的简历被捞起来之后&#xff0c;我的心情特别高兴&#xff0c;然后把面试时间约到了3月…

C++进阶 多态原理

作者&#xff1a;小萌新 专栏&#xff1a;C进阶 作者简介&#xff1a;大二学生 希望能和大家一起进步&#xff01; 本篇博客简介&#xff1a;简单介绍C中多态的概念 多态原理多态的原理虚函数表多态的原理为什么对象不能构成多态动态绑定和静态绑定继承多态面试题概念题问答题总…

【SpringBoot+Redis】实现多端登录+token自动续期和定期刷新+自定义注解和拦截器实现鉴权(角色和权限校验)

目录前言思路1、登录、token相关2、鉴权相关实现一、登录1、先定义一个Component组件2、登录、退出二、鉴权、token相关1、自定义注解2、拦截器鉴权、token续期和定期刷新3、新增/更新角色时&#xff0c;更新redis中角色对应的权限4、更新菜单权限标识时&#xff0c;更新redis中…

优优聚:美团成立机器人研究院!

美团成立机器人研究院 不用出门走路购买生活必须品&#xff0c;也不用等待几天的快递时间&#xff0c;现在的消费者越来越习惯“外卖点一切”、半小时送达的购物方式。 在即时零售市场中&#xff0c;美团&#xff0c;无疑是当下的焦点。 万万没想到的是&#xff0c;“外卖送一…

Java+MySQL基于SSM的二手玩具交换网站

本二手玩具交换网站主要包括系统用户管理模块、商品信息管理模块、所有购买记录、订单信息、登录模块、和退出模块等多个模块。它帮助二手玩具交换实现了信息化、网络化,通过测试,实现了系统设计目标,相比传统的管理模式,本系统合理的利用了二手玩具交换数据资源,有效的减少了二…

转行IT,女生学编程有前途吗?

一直以来&#xff0c;IT行业对技术的高要求让人们把这个行业标签为男生专属&#xff0c;从前只有个别女生顶着强大的压力、身边人的不理解坚守在IT岗位。 近些年随着互联网科技的发展与普及&#xff0c;很多女孩子发现原来IT技术没有自己想象中难&#xff0c;而且还可以毕业拿高…

Java项目:springboot课程自动排课系统

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 课程自动排课系统&#xff0c;该系统分两种角色&#xff1a;管理员与普通用户&#xff1b; 主要功能包括&#xff1a; 首页&#xff1a;查看分…

【运维有小邓】AD域权限报表

企业需要每天都警惕内部攻击和间谍等重大安全威胁。防范潜在的攻击者对保护组织的网络和数据大有裨益。但是&#xff0c;要实现此目标&#xff0c;还需满足几点。您必须完全了解分配给Windows Active Directory (AD)中用户和组的权限&#xff0c;它们可访问的帐户、资源和数据&…

java学习day64(乐友商城)Elasticsearch

1.Elasticsearch介绍和安装 用户访问我们的首页&#xff0c;一般都会直接搜索来寻找自己想要购买的商品。 而商品的数量非常多&#xff0c;而且分类繁杂。如何能正确的显示出用户想要的商品&#xff0c;并进行合理的过滤&#xff0c;尽快促成交易&#xff0c;是搜索系统要研究…

自己可以学习python吗?

现在还有很多小伙伴们在怀疑自学Python编程语言行不行&#xff0c;我想说Python自学是肯定行的&#xff0c;最重要的是要看自己的努力程度&#xff0c;Python是一个简单的编程语言&#xff0c;任何懂python语法规则的人都可以操作部署&#xff0c;更重要的是它是免费开源的&…

【学习笔记】前端HTML+CSS部分必懂基础内容(面试考察重点)

一、HTML 1. 什么是语义化&#xff1f;为什么要语义化&#xff1f;语义化标签有哪些 语义化&#xff1a;根据内容的结构化&#xff08;内容语义化&#xff09;&#xff0c;选择合适的标签&#xff08;代码语义化&#xff09;便于开发者阅读和写出更优雅的代码的同时让浏览器的…

试卷的安全方案

摘 要 随着互联网的飞速发展,传统的人工试卷保密措施已渐渐形成智能互联网加密保护。巨大的变革大大减少工作量&#xff0c;提升试卷质量&#xff0c;但随之而来的试卷拟定到发放以及回收的安全问题日益凸显。为了保护智能互联网试卷的保密性,认证授权加密已经成为了互联网传输…

MIUI10国际版系统自定义字体设置办法

国际版系统主题商店中没有字体设置。只有主题和壁纸 需要用到第三方主题安装工具mythemer和miui字体打包主题工具mifont maker 首先在网络上下载ttf格式的字体。 打开mifont maker&#xff0c;点击create custom font 点击pick font选择下载的字体 点击create miui font 制…

AlertDialog6种使用方法

AlertDialog 1.AlertDialog的6种创建模式 1.1setMessage 1&#xff09;Java代码 //1.创建构造器AlertDialog.Builder buildernew AlertDialog.Builder(this);//2.设置参数builder.setTitle("弹窗提示").setIcon(R.mipmap.boy).setMessage("选择你的性别&#xf…