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. 通过有序线性结构构造AVL树

    通过有序线性结构构造AVL树 本博客旨在结局利用有序数组和有序链表构造平衡二叉树(下文使用AVL树代指)问题. 直接通过旋转来构造AVL树似乎是一个不错的选择,但是稍加分析就会发现,这样平白无故做了许 ...

  2. MongoDB是什么？非关系型数据库的优点？安装使用教程

    哈喽!大家好,我是小奇,一位热爱分享的程序员 小奇打算以轻松幽默的对话方式来分享一些技术,如果你觉得通过小奇的文章学到了东西,那就给小奇一个赞吧 文章持续更新 一.前言 书接上回,由于球姐都有孩子了, ...

  3. Object类和对象类型转换

    学习内容:Object类和对象类型转换 一.Object类 1.Object类是所有类的父类,是Java类层中最高层的类. 2.getClass()方法:返回对象执行时的Class实例,然后用此实例调 ...

  4. 判断数据类型（typeof&instanceof&toString）

    一.数据类型 ES6规范中有7种数据类型,分别是基本类型和引用类型两大类 基本类型(简单类型.原始类型):String.Number.Boolean.Null.Undefined.Symbol 引用类 ...

  5. jq命令用法总结

    原创:扣钉日记(微信公众号ID:codelogs),欢迎分享,转载请保留出处. 简介 如果说要给Linux文本三剑客(grep.sed.awk)添加一员的话,我觉得应该是jq命令,因为jq命令是用来处 ...

  6. Spring中的Bean作用域

    概述 scope用来声明容器中的对象所应该处的限定场景或者说该对象的存活时间,即容器在对象进入其 相应的scope之前,生成并装配这些对象,在该对象不再处于这些scope的限定之后,容器通常会销毁这些 ...

  7. model.apply(fn)或net.apply(fn)

    详情可参考:https://pytorch.org/docs/1.11/generated/torch.nn.Module.html?highlight=torch%20nn%20module%20a ...

  8. （持续更新）虚树，KD-Tree，长链剖分，后缀数组，后缀自动机

    真的就是讲课两天,吸收一个月呢! \(1.\)虚树 \(2.\)KD-Tree \(3.\)长链剖分 \(4.\)后缀数组 后缀数组 \(5.\)后缀自动机 后缀自动机

  9. 【C#/VB.NET】 将PDF转为SVG/Image, SVG/Image转PDF

    SVG是一种图形文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形.它在放大或者改变尺寸的情况下其图形质量不会有所损失,且与 JPG 和 GIF 图像比起 ...

  10. 开始讨论离散型随机变量吧！《考研概率论学习之我见》 -by zobol

    上一文中,笔者给出了随机变量的基本定义:一个可测映射,从结果空间到实数集,我们的目的是为了引入函数这个数学工具到考研概率论中,但是我们在现实中面对的一些事情结果,映射而成的随机变量和其对应的概率值,并 ...