• 【HTML】HTML基础8.1（表单标签）

    目录

    效果

    基础知识

    标签

    ①

    ②

     代码

    效果

    基础知识

    表单的组成元素
    表单控件用户所填写的信息
    提示信息提示用户需要填的信息
    表单域包含表单元素的区域

     

    标签

    ①

    1. <form action="" method="">
    2.  
    3. form>

    标签确定了一个表单域，我们的表单就是在这里面写的，其中

    标签的属性含义
    action用户信息的存储地址
    metho提交方式

    等等

    • 这里我们只看基础部分，所以具体的地址和提交方式我们先不管

    ②

    输入表单元素

    <input type="" name="" value="">

     标签的属性介绍

    • type=""
      text文本框
      hidden定义隐藏输入字段
      password密码框
      submit提交到服务器
      reset重置数据
      image图像形式的提交数据
      checkbox定义复选框（多选）
      radio定义单选框

    name=""与value=""

    两者都是给开发人员看的，不是所有的我们基础都要写的，不过在定义单选和复选时要给name赋同样的值，这样才能实现效果（理解：同一个名字表明是在同一个控件中做出选择）

     代码

    与前面提到的标签一结合，就可以得到效果中所展示的啦~

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8" />
    5. 		<title>虚假的影迷注册网站title>
    6. 	head>
    7. 	<body>
    8. 		<h1>虚假的影迷注册网站h1>
    9. 		<form action="" method="">
    10. 			<h3>请选择您的性别h3><br />
    11. 			男<input type="radio" name="sex" />		女<input type="radio" name="sex" />		沃尔玛塑料袋<input type="radio" name="sex" />
    12. 			<h3>定义您的昵称h3>
    13. 			<input type="text" name="" id="" value="" />
    14. 			<h3>定义您的密码h3>
    15. 			<input type="password" name="" id="" value="" />
    16. 			<h3>点击一张您最爱的照片，生成个性化页面h3>
    17. 			<input type="image" src="./img/5人。2.jpg" width="100" />
    18. 			<input type="image" src="img/5人酷背景.jpg" width="200" />
    19. 			<input type="image" src="img/你好.jpg" width="150" />
    20. 			<h3>请选择您在银河护卫队中喜欢的角色（可多选）h3><br />
    21. 			星爵<input type="checkbox" name="juese" id="" value="" />	火箭<input type="checkbox" name="juese" id="" value="" />	
    22. 			  毁灭者德拉克斯<input type="checkbox" name="juese" id="" value="" />	格鲁特<input type="checkbox" name="juese" id="" value="" />
    23. 			其他<input type="text"/>
    24. 			
    25. 		form>
    26. 	body>
    27. html>

    今天的分享到这里结束啦~希望能帮到您！<・)))><<

  • 相关阅读:
    css实现的动态导航菜单，倾斜放置，鼠标悬停回正html前端源码
    面试题：分布式锁用了 Redis 的什么数据结构
    uni-app复制功能
    认识String
    c++（六）
    leetcode：698. 划分为k个相等的子集【暴搜 + 排序 + 剪枝优化题】
    开发时长一年半golang工程师应该具备什么样的技术能力？
    计算机毕业设计（附源码）python专家管理系统
    MMDeploy部署实战系列【第二章】：mmdeploy安装及环境搭建
    PHP7的新特性
  • 原文地址：https://blog.csdn.net/2301_79982543/article/details/136546096