HTML笔记 —— 表单

本篇博客是根据B站up@遇见狂神说 的视频以及W3school官网文档整理的笔记,里面会有一些视频的截图和官网的概念,以及我个人的注释笔记等,
全篇博客包括代码均为自己手打,结果截图均为自己运行的结果。
注:博文中的截图和网络上找到的图,都没有加上csdn的水印,只有我自己的图片才会有水印。这篇博客只是学习交流所用
以下是视频链接
https://www.bilibili.com/video/BV1x4411V75C?spm_id_from=333.999.0.0
W3school官网链接
https://www.w3school.com.cn/html/html_jianjie.asp

目录

      • 表单 < form >
        • < input > 元素
          • 常规文本输入,密码框,提交表单,清空表单
          • name和value属性的区别
        • 整体代码
        • 表单验证
            • placeholder,用于输入框
            • required非空判断
            • pattern传入正则表达式

表单 < form >

HTML 表单用于搜集不同类型的用户输入

HTML 表单包含表单元素
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等

HTML笔记 —— 表单_第1张图片

< input > 元素

< input > 元素是最重要的表单元素。根据不同的type属性,< input > 元素会有不同的功能
例如(当然不止这些,这个表格中只是部分内容):
HTML笔记 —— 表单_第2张图片

常规文本输入,密码框,提交表单,清空表单
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习title>
head>
<body>
<h1>注册h1>


<form action="1.我的第一个网页.html" method="get">
    
    
    <p>姓名: <input type="text" name = "uesrname" value="默认值" maxlength="8" size="30"> p>
    
    
    <p>名字:
        <input type="text" name="username" value="admin" readonly>
    p>
    
    
    
    <p>密码: <input type="password" name = "pwd" > p>
    
    
    
    <p>
        <input type="submit" value="提交表单">
        <input type="reset" value="清空表单">
    p>

form>
body>
html>

HTML笔记 —— 表单_第3张图片

name和value属性的区别
  1. name是控件的名称,多个空间可以取同一个名称
    这个名称可以让我们对这个控件进行操作,比如锚链接里面,就可以通过一个控件的名称,跳转到该控件所在的位置
  2. value是控件的值,不同的控件的value的作用不同
    (1)type等于button、reset、submit时,value是显示在按钮上的文本内容
    (2)type等于text、password、hidden时,value是默认显示的初始值
    (3)type等于checkbox、radio、image时,value是与输入相关联的值

name属性还有一个作用,当填写好表单里面的信息后,点击提交表单,可以在浏览器的地址栏看到这些表单的信息(前提是form标签的属性method的属性值是get)
在这里插入图片描述
这里的username就是第一个控件,用来输入姓名的文本框的名字
这里是以键值对的形式打印在地址栏,如果没有name属性相当于没有key值,也就无法打印

比如我删去第一个input标签里面的name属性,再提交一次表单,结果为
在这里插入图片描述

整体代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单学习title>
head>
<body>
<h1>注册h1>


<form action="1.我的第一个网页.html" method="get">
    
    
    
    
    <p>名字:
        <input type="text" name="username" value="admin" readonly>
    p>
    
    
    <p>密码: <input type="password" name = "pwd" hidden> p>

    
    
    
    
    <p>性别:
        <input type="radio" value="boy" name="sex" disabled/><input type="radio" value="girl" name="sex"/>p>


    
    <p>爱好:
        <input type="checkbox" value="sleep" name="favorite">睡觉
        <input type="checkbox" value="chat" name="favorite">聊天
        <input type="checkbox" value="code" name="favorite" checked>敲代码
        <input type="checkbox" value="game" name="favorite">打游戏
    p>



    
    <p>按钮
        <input type="button" name="btn1" value="一个按钮">
        <input type="image" src="../resources/image/图片2.png" width="400px" height="300px">
    p>



    
    <p>国家:
        <select name="列表名称">
            <option value="China">中国option>
            <option value="American">美国option>
            <option value="Japanese">日本option>
            <option value="Russia" selected>俄罗斯option>
        select>
    p>



    
    <p>反馈:
        <textarea name="textarea" cols="30" rows="10">文本内容textarea>
    p>



    
    <p>选择文件:
        <input type="file" name="files">
    p>



    
    <p>邮箱:
        <input type="email" name="email">
    p>



    
    <p>url
        <input type="url" name="url">
    p>



    
    <p>数字:
        <input type="number" name="number" max="100" min="0" step="10">
    p>



    
    <p>滑块:
        <input type="range" min="0" max="50" step="5">
    p>



    
    <p>搜索:
        <input type="search" name="search">
    p>



    
    <p>
        <label for="mark">你点我试试label>
        <input type="text" id="mark">
    p>



    
    
    <p>
        <input type="submit" value="提交表单">
        <input type="reset" value="清空表单">
    p>

form>
body>
html>

HTML笔记 —— 表单_第4张图片
HTML笔记 —— 表单_第5张图片

表单验证

HTML笔记 —— 表单_第6张图片

placeholder,用于输入框

HTML笔记 —— 表单_第7张图片
在这里插入图片描述

required非空判断

HTML笔记 —— 表单_第8张图片
HTML笔记 —— 表单_第9张图片

pattern传入正则表达式

注意这里的正则表达式不需要用\来代替
HTML笔记 —— 表单_第10张图片
输入的内容必须符合正则表达式才可以提交表单

你可能感兴趣的:(前端,html,表单)