HTML表单学习

前言

HTML基础学习会由HTML基础标签学习、HTML表单学习和一张思维导图总结HTML基础三篇文章构成,文章中博主会提取出重点常用的知识和经常出现的bug,提高学习的效率,后续会相继上传CSS和JavaScript的博客,欢迎大家一起学习,共同进步。

注:HTML基础学习的整篇文章由博主参照b站up主遇见狂神说的HTML视频进行编写,内容大致相同,本篇文章仅供大家参考学习,欢迎大家提出问题。

本篇文章承接博主的上一篇文章HTML基础标签学习(https://www.cnblogs.com/qjds/p/16485941.html)

下一篇文章为一张思维导图总结HTML基础 (https://www.cnblogs.com/qjds/p/16501554.html)

这两篇文章为HTML基础入门的全部内容,由于博主学艺不精,内容难免疏漏,欢迎大家指出问题。

11.表单post和get提交

实现简单的登录注册页面:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body> <h1>注册</h1> <!--表单form
action : 表单提交的位置,可以是网站也可以是一个请求处理地址
method : post,get提交方式
post:比较安全,传输大文件
get:我们可以在URL中看到我们提交的信息,不安全,但是高效
--> <form action="1.我的第一个网页.html" method="post">
<!-- 文本输入框:input type="text"-->
<p>名字: <input type="text" name="username"></p>
<!-- 密码框:input type="password"-->
<p>密码: <input type="password" name="pwd"></p> <p>
<!--提交-->
<input type="submit">
<!--重置-->
<input type="reset">
</p> </form> </body>
</html>

结果展示

12.文本框和单选框

<!--单选框标签
input type="radio" 单选框
value="boy" 单选框的值
name="sex" 表示组,必须在同一个组才能单选
--> <p>性别: <input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>

结果展示

13.按钮和多选框

<!--    多选框
type="checkbox"
-->
<p>爱好: <input type="checkbox" value="sing" name="hobby">唱
<input type="checkbox" value="jump" name="hobby">跳
<input type="checkbox" value="rap" name="hobby">rap
<input type="checkbox" value="play" name="hobby">打篮球
</p> <!-- 按钮
type="button" 普通按钮
type="image" 图像按钮 图片是可以点击提交的
type="submit" 提交按钮
type="reset" 重置按钮
-->
<p>按钮: <input type="button" name="btn1" value="kunkun"> <input type="image" src="../resources/image/1234.jpg.jpg" width="40px" height="30px">
</p>

结果展示

14.type小结

form表单中的type:(都是在input中)

  • text:文本框
  • radio:单选框
  • checkbox:多选框
  • type="button" 普通按钮
  • type="image" 图像按钮 图片是可以点击提交的
  • type="submit" 提交按钮
  • type="reset" 重置按钮
  • type="file" 文件域

15.列表框文本域和文件域

<!--    下拉框,列表框
selected 默认选中
-->
<p>NBA球队:
<select name="列表名称" >
<option value="选项的值" selected>金州勇士</option>
<option value="选项的值">洛杉矶湖人</option>
<option value="选项的值">迈阿密热火</option>
<option value="选项的值">克利夫兰骑士</option>
</select>
</p> <!-- 文本域
cols="30" 列
rows="10" 行
-->
<p>反馈:
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p> <!-- 文件域
type="file"
name="files"
必须写name。提交时是name名加选择的文件名
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>

结果展示

16.搜索框滑块和简单验证

    <!--邮件验证-->
<p>邮箱:
<input type="email" name="email">
</p> <!--URL验证-->
<p>URL:
<input type="url" name="url">
</p> <!--数字验证-->
<p>数字:
<input type="number" name="number" max="100" min="0" step="any">
</p> <!--滑块range-->
<p>音量:
<input type="range" name="voice" min="0" max="100" step="any">
</p> <!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>

结果展示

17.表单的应用

  • 隐藏域 :hidden
  • 只读 : readonly
  • 禁用 : disabled

18.表单初级验证

  • placeholder 提示信息
  • required 非空判断,不能为空
  • pattern 正则表达式判断
 <p>名字: <input type="text" name="username" placeholder="请输入用户名" required></p>

结果展示:

HTML表单学习的更多相关文章

  1. HTML5表单学习笔记

    表单在网页设计中的作用非常重要,HTML5又增加了表单方面的诸多功能,包括增加input输入类型,input属性,form元素,form属性等,解决了我们以前比较头疼或者繁琐的功能. 新增的输入类型 ...

  2. Form表单学习网站

    HTML表单 -- form标签 -- 与浏览者交互:http://www.dreamdu.com/xhtml/tag_form/

  3. html表单---学习笔记03

    第8章 表单 8.1 表单标记<form> <form name="表单名称" method="提交方法" action="处理程序 ...

  4. Django Form表单学习总结

    Form中添加自定义的验证:    1.对特定字段属性的验证;    2.包含多字段的验证. 先创建一个简单的Form: from django import forms class ContactF ...

  5. Html学习之十八(表格与表单学习--统计表制作)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Html学习之十七(表格与表单学习--排行版制作)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. HTML5 表单学习

    创建表单的方法: 用form标签 form标签常用元素:input:单行表单.select:下拉式表单.textarea:多行文本域 input元素的type属性:text:文本属性.checkbox ...

  8. 18 12 24 html 表单学习

    html表单 表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下: 1.<form>标签 定义整体的表单区域 action属性 定义表单数据提交地址 meth ...

  9. JS表单学习笔记(思维导图)

    导图

随机推荐

  1. .Net 6 WebApi 项目部署到 Linux 系统上的 Docker 容器

    1.创建一个基础的WebApi项目 注意:因为发布时候,Dockerfile文件必须和解决方案.cspro文件放在同级,所以建议勾上这个,当时遇到这个问题,导致打包镜像时找不到.cspro文件,搞了好 ...

  2. arts-week11

    Algorithm 69. Sqrt(x) - LeetCode Review Building a network attached storage device with a Raspberry ...

  3. Base64 编码知识,一文打尽!

    现在网站为了提升用户的浏览体验越来越多的使用了图片,而这些图片通常以 Base64 的形式存储和加载.因此各位开发工程师肯定对 Base64 毫不陌生了,那么你知道 Base64 究竟是什么,为什么要 ...

  4. 基于云服务MRS构建DolphinScheduler2调度系统

    摘要:本文介绍如何搭建DolphinScheduler并运行MRS作业. 本文分享自华为云社区<基于云服务MRS构建DolphinScheduler2调度系统>,作者: 啊喔YeYe . ...

  5. github新项目npm错误

    当我们从GitHub或者别人那里拿到项目的时候,一般都是要先npm install 进行安装依赖.但是难免会遇到报错. 出现问题1: 解决方案:清除缓存npm cache clear --force之 ...

  6. 使用pip安装库或执行pip命令时报错解决方案

    初次安装pip后执行安装升级一般不会有问题,但是国外的镜像源下载升级由于网速过慢会进行报错,提示需要升级 pip 或者下载速度很慢最后直接报了错如下图: 这个时候只需要修改镜像源即可,建议修改为永久镜 ...

  7. Full卷积、Same卷积、Valid卷积、带深度的一维卷积

    转载和参考以下几个链接:https://www.cnblogs.com/itmorn/p/11177439.html; https://blog.csdn.net/jack__linux/articl ...

  8. conda install和pip install区别

    conda ≈ pip(python包管理) + virtualenv(虚拟环境) + 非python依赖包管理 级别不一样conda和yum比较类似,可以安装很多库,不限于Python.conda是 ...

  9. vue虚拟dom和diff算法

    vue的虚拟dom和diff算法 1.虚拟dom 虚拟dom,我的理解就是通过js对象的方式来具体化每一个节点,把dom树上面的每个节点都变为对象里的一个元素,元素的子元素变为子节点,节点上面的cla ...

  10. Android Jetpack Navigation基本使用

    Android Jetpack Navigation基本使用 本篇主要介绍一下 Android Jetpack 组件 Navigation 导航组件的 基本使用 当看到 Navigation单词的时候 ...