【HTML系列】第五章 · 表单

写在前面


        Hello大家好, 我是【麟-小白】,一位软件工程专业的学生,喜好计算机知识。希望大家能够一起学习进步呀!本人是一名在读大学生,专业水平有限,如发现错误不足之处,请多多指正!谢谢大家!!!

        如果小哥哥小姐姐们对我的文章感兴趣,请不要吝啬你们的小手,多多点赞加关注呀!❤❤❤ 爱你们!!!


目录

写在前面

1. 表单

1.1 基本结构

1.2 常用表单控件

1.3 禁用表单控件

1.4 label 标签

1.5 fieldset 与 legend 的使用(了解)

1.6 表单总结

结语


【往期回顾】

【HTML系列】第四章 · 列表和表格

【HTML系列】第三章 · 图片标签和超链接

【HTML系列】第二章 · HTML基础

【HTML系列】第一章 · HTML入门

【HTML系列】前章 · HTML前序知识


【其他系列】

【Java基础系列】(已更新完)


1. 表单


1.1 基本结构

  • 概念:一个包含交互的区域,用于收集用户提供的数据。
  • 简单梳理:

  • 在本小节,我们先记住表单的整体形式,稍后会对表单控件进行详细讲解。
示例代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_基本结构</title>
</head>
<body>
    <form action="https://www.baidu.com/s">
        <input type="text" name="wd">
        <button>去百度搜索</button>
    </form>
    <hr>
    <form action="https://search.jd.com/search" target="_blank" method="get">
        <input type="text" name="keyword">
        <button>去京东搜索</button>
    </form>
    <hr>
    <a href="https://search.jd.com/search?keyword=手机">搜索手机</a>
</body>
</html>

1.2 常用表单控件

① 文本输入框

<input type="text">
  • 常用属性如下:
    • name 属性:数据的名称。
    • value 属性:输入框的默认输入值。
    • maxlength 属性:输入框最大可输入长度。

② 密码输入框

<input type="password">
  • 常用属性如下:
    • name 属性:数据的名称。
    • value 属性:输入框的默认输入值(一般不用,无意义)。
    • maxlength 属性:输入框最大可输入长度。
③ 单选框
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="male">男
  • 常用属性如下:
    • name 属性:数据的名称,注意:想要单选效果,多个 radio name 属性值要保持一致。
    • value 属性:提交的数据值。
    • checked 属性:让该单选按钮默认选中。
④ 复选框
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
  • 常用属性如下::
    • name 属性:数据的名称。
    • value 属性:提交的数据值。
    • checked 属性:让该复选框默认选中。
⑤ 隐藏域
<input type="hidden" name="tag" value="100">
  • 用户不可见的一个输入区域,作用是:
    • 提交表单的时候,携带一些固定的数据。
    • name 属性:指定数据的名称。
    • value 属性:指定的是真正提交的数据。

⑥ 提交按钮

<input type="submit" value="点我提交表单">
<button>点我提交表单</button>
  • 注意:
    • button 标签 type 属性的默认值是 submit
    • button 不要指定 name 属性
    • input 标签编写的按钮,使用 value 属性指定按钮文字。

⑦ 重置按钮

<input type="reset" value="点我重置">
<button type="reset">点我重置</button>
  • 注意点:
    • button 不要指定 name 属性
    • input 标签编写的按钮,使用 value 属性指定按钮文字。
⑧ 普通按钮
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
  • 注意点:
    • 普通按钮的 type 值为 button ,若不写 type 值是 submit 会引起表单的提交。
⑨文本域
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>
  • 常用属性如下:
    • rows 属性:指定默认显示的行数,会影响文本域的高度。
    • cols 属性:指定默认显示的列数,会影响文本域的宽度。
    • 不能编写 type 属性,其他属性,与普通文本输入框一致。
⑩下拉框
<select name="from">
    <option value="黑">黑龙江</option>
    <option value="辽">辽宁</option>
    <option value="吉">吉林</option>
    <option value="粤" selected>广东</option>
</select>
  • 常用属性及注意事项:
    • name 属性:指定数据的名称。
    • option 标签设置 value 属性, 如果没有 value 属性,提交的数据是 option 中间的文字;如果设置了 value 属性,提交的数据就是 value 的值(建议设置 value 属性)
    • option 标签设置了 selected 属性,表示默认选中。

演示代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单_常用控件</title>
</head>
<body>
    <form action="https://search.jd.com/search">
        账户:
        <input type="text" name="account" value="zhangxianglin" maxlength="16">
        <br>
        密码:
        <input type="password" name="psw" value="" maxlength="8">
        <br>
        性别:
        <input type="radio" name="gender" value="fale">男
        <input type="radio" name="gender" value="female">女
        <br>
        爱好:
        <input type="checkbox" name="hobby" value="computer game">玩游戏
        <input type="checkbox" name="hobby" value="shopping" checked>购物
        <input type="checkbox" name="hobby" value="play football">踢足球
        <input type="checkbox" name="hobby" value="watch">看电影
        <br>
        其他:
        <textarea name="other" rols="30" rows="10"></textarea>
        <br>
        籍贯:
        <select name="place">
            <option value="赣" selected>江西</option>
            <option value="湘">湖南</option>
            <option value="粤">广东</option>
            <option value="桂">广西</option>
            <option value="皖">安徽</option>
        </select>
        <input type="hidden" name="from" value="toutiao">
        <br>
        <button type="submit">确认</button>
        <input type="submit" value="确认">
        <button type="reset">重置</button>
        <input type="reset" value="重置">
        <button type="button">普通按钮</button>
        <input type="button" value="普通按钮">
    </form>
</body>
</html>


1.3 禁用表单控件

  • 给表单控件的标签设置 disabled 既可禁用表单控件。
  • input textarea button select option 都可以设置 disabled 属性

1.4 label 标签

  • label 标签可与表单控件相关联,关联之后点击文字,与之对应的表单控件就会获取焦点。两种与 label 关联方式如下:
    • label 标签的 for 属性的值等于表单控件的 id
    • 把表单控件套在 label 标签的里面。

1.5 fieldset legend 的使用(了解)

  • fieldset 可以为表单控件分组、 legend 标签是分组的标题。

演示代码:

<fieldset>
    <legend>主要信息</legend>
    <label for="zhanghu">账户:</label>
    <input id="zhanghu" type="text" name="account" maxlength="10"><br>
    <label>
        密码:
        <input id="mima" type="password" name="pwd" maxlength="6">
    </label>
    <br>
    性别:
    <input type="radio" name="gender" value="male" id="nan">
    <label for="nan">男</label>
    <label>
        <input type="radio" name="gender" value="female" id="nv">女
    </label>
</fieldset>

1.6 表单总结


结语


本人会持续更新文章的哦!希望大家一键三连,你们的鼓励就是作者不断更新的动力

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

html制作好看的个人简历(附源码)

文章目录1.设计来源1.1 主界面1.2 基本资料页面1.3 个人名言页面1.4 教育经历页面1.5 联系方式页面1.6 自我评价页面1.7 工作经历页面1.8 兴趣爱好页面1.9 沟通交流页面2.效果和源码2.1 动态效果2.2 源代码2.3 相关个人简历源码源码下载作者&#xff1a;xcLeigh 文章地址&#…

图片怎么转PDF文件格式?推荐这五个免费无损转换方法!

如何将图片转换为PDF&#xff1f;图片格式文件经常用于每个人的日常生活中&#xff0c;但有时候。我们会将多张图片转换为一份PDF文件进行单个文件传输&#xff0c;但很多人不知道如何将图片转换为PDF格式。 今天&#xff0c;我将与大家分享五种简单免费的无损转换方法&#x…

ASP医院管理系统—病历管理系统的设计与实现

病历管理系统是医院管理系统的重要组成,该系统的开发主要包括后台数据库的建立以及前台应用程序的开发两个方面。对于前者要求建立起数据一致性和完整性强、数据安全性好的数据库,而对于后者则要求具有齐全完善的应用程序功能,友好人性化的操作界面。该系统采用现代的办公自动化…

九龙证券|算力大基建来了!交易额提高32倍,打造算力南线主干道

贵州省算力建造规划出炉&#xff0c;三年内算力进步超11倍&#xff0c;打造我国“东数西算”南线主干道。 贵州省发布算力建造规划 日前&#xff0c;贵州省大数据开展管理局发布《关于印发面向全国的算力保证基地建造规划的告诉》&#xff08;以下简称《告诉》&#xff09;。《…

全志V3S嵌入式驱动开发(看原理图)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 对于嵌入式软件开发的同学来说&#xff0c;你可能不一定要会自己画原理图、做pcb板。但是&#xff0c;别人已经设计好的原理图&#xff0c;自己还是…

〖Python网络爬虫实战⑧〗- requests的使用(二)

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;目前专栏免费订阅&#xff0c;在转为付费专栏前订阅本专栏的&#xff0c;可以免费订阅付费…

项目管理案例分析有哪些?

项目管控中遇到的问题有哪些&#xff1f;这些问题是如何解决的&#xff1f; 在项目管理领域&#xff0c;案例分析是一种常见的方法来学习和理解项目管理实践&#xff0c;下面就来介绍几个成功案例&#xff0c;希望能给大家带来一些参考。 1、第六空间&#xff1a;快速响应个性…

【Linux】七、进程间通信(二)

目录 三、system V&#xff08;IPC&#xff09; 3.1 system V共享内存 3.1.1 共享内存的概念 3.1.2 共享内存的原理 3.1.3 创建共享内存(shmget ) 3.1.4 ftok函数 3.1.5 查看共享内存资源 3.1.6 创建共享内存测试代码 3.1.7 再次理解共享内存 3.1.8 释放共享内存(shm…

Redis7搭建主从+哨兵通俗易懂

背景前提–用到的命令 ps -ef |grep redis redis服务器启动(精确启动配置文件位置) redis-server redis6379.conf redis-server redis6380.conf redis-server redis6381.conf redis客户端登录 redis-cli -a 123456 -p 6379 redis-cli -a 123456 -p 6380 redis-cli -a 12345…

蓝桥杯刷题冲刺 | 倒计时1天

作者&#xff1a;指针不指南吗 专栏&#xff1a;蓝桥杯倒计时冲刺 &#x1f43e;蓝桥杯加油&#xff0c;大家一定可以&#x1f43e; 文章目录我是菜菜&#xff0c;最近容易我犯的错误总结 一些tips 各位蓝桥杯加油加油 当输入输出数据不超过 1e6 时&#xff0c;scanf printf 和…

【Vue】初识Vue(一)

&#x1f697;Vue学习扬帆起航~ &#x1f6a9;本文已收录至专栏&#xff1a;Vue框架 &#x1f44d;由于Vue2与Vue3存在许多相似之处&#xff0c;先开始Vue2学习再进阶到Vue3 我们知道技术的兴起与流行一般都是为了帮助我们解决一类问题使得我们开发体验更加舒适&#xff0c;那么…

C++之多态

文章目录前言一、多态的概念二、多态的定义及实现1.多态的构成条件2.虚函数3.虚函数的重写&#xff08;覆盖&#xff09;4.虚函数重写的两个例外4.C11中的override和final关键字三、重载、重定义&#xff08;隐藏&#xff09;、重写&#xff08;覆盖&#xff09;的区分四、抽象…

【美赛】2023年ICM问题Z:奥运会的未来(思路、代码)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【面试】MySQL面试题

文章目录数据库基础知识为什么要使用数据库什么是SQL&#xff1f;什么是MySQL?MySql, Oracle&#xff0c;Sql Service的区别数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式&#xff1f;分别有什么区别&#xff1f;数据库经常使用的函数数据类…

C++设置动态库的版本号(软链接)

1,动态库版本命名规则 假设有一个动态库&#xff1a;libfooSdk.so.1.1.0&#xff0c;其对应的三个名称如下。 realname&#xff1a;libfooSdk.so.1.1.0 soname&#xff1a;libfooSdk.so.1 linkname&#xff1a;libfooSdk.solinux的动态库的命名格式是libfooSdk.so.x.y.z 版本…

大数据概述及其软件生态

一、大数据的诞生 &#xff08;1&#xff09;当全球互联网逐步建成&#xff08;2000年左右&#xff09;&#xff0c;各大企业或政府单位拥有了海量的数据亟待处理。 &#xff08;2&#xff09; 基于这个前提逐步诞生了以分布式的形式&#xff08;即多台服务器集群&#xff09;…

PCB生产工艺流程三:生产PCB的内层线路有哪7步

PCB生产工艺流程三&#xff1a;生产PCB的内层线路有哪7步 在我们的PCB生产工艺流程的第一步就是内层线路&#xff0c;那么它的流程又有哪些步骤呢&#xff1f;接下来我们就以内层线路的流程为主题&#xff0c;进行详细的分析。 由半固化片和铜箔压合而成&#xff0c;用于…

Vue|计算属性

1. 计算属性1.1 差值语法1.2 methods1.3 计算属性1. 计算属性 1.1 差值语法 开始前分别在项目目录创建文件夹及页面如下 需求1&#xff1a;在两个文本框中分别输入姓和名的同时需要在下方将数据进行拼接组装&#xff0c;效果如下图 如果用传统的方式来实现的话&#xff0c;需要…

投屏软件:ApowerMirror Crack

一个软件&#xff0c;两个系统 ApowerMirror是一个跨平台的屏幕镜像应用程序&#xff0c;可用于iOS和Android设备&#xff0c;与Windows和Mac兼容。对于运行支持 Chromecast 的 Android 5.0 或更高版本的手机&#xff0c;用户可以使用此程序镜像屏幕。而对于支持AirPlay的iOS设…

bfs与dfs详解(经典例题 + 模板c-代码)

文章首发于&#xff1a;My Blog 欢迎大佬们前来逛逛 文章目录模板解析dfsbfs1562. 微博转发3502. 不同路径数165. 小猫爬山模板解析 DFS&#xff08;深度优先搜索&#xff09;和BFS&#xff08;广度优先搜索&#xff09;是图论中两个重要的算法。 dfs 其中DFS是一种用于遍历…
最新文章