• 表单相关元素

    表单概述

    表单主要用来收集客户端提供的相关信息，使网页具有交互的功能，它是用户与网页实现交互的重要手段。

    表单简介

    • 表单通常设计在一个HTML文档中，当用户填写完信息后执行提交(submit)操作，将表单的内容从客户端的浏览器传送到服务器上，经过服务器处理后，再将用户所需信息传回客户端的浏览器上，这样网页就具有了交互性。
    • 最常见的表单形式主要包括文本框、单选按钮、复选框、按钮等。

    表单标签

    表单是网页上的一个特定区域，这个区域通过

    双标签声明，相当于一个表单容器，表示其他的表单标签需要在其范围内才有效。

    输入标签

    输入标签是标签，通过设置其"type"的属性值改变其输入方式，而不同的输入方式又会导致其他参数因此而异。

    文本框

    表单中的文本框主要有两种，分别是单行文本框和密码输入框。不同的文本框对应的"type"属性值也不同，其对应的表现形式和应用也各有差异。
    使用

    单行文本框

    text属性用来设定在表单的文本框中输入任何类型的文本、数字或字母。输入的内容以单行显示。
    其语法格式如下：

    • name：文本框的名称，用于和页面中其他控件加以区别。命名时不能包含特殊字符，也不能以HTML预留字符作为名称。
    • size：定义文本框在页面中显示的长度，以字符作为单位
    • maxlength：定义在文本框中最多可以输入的文字数
    • value：用于定义文本框中的默认值
    • placeholder：显示提示的文本，文本框没有内容时显示

    在HTML中，


    在这个例子中，for属性的值是 “name”，它与元素的id属性值相对应。这意味着当用户点击"用户名："这个标签时，浏览器会自动将焦点设置到ID为"name"的输入框上，方便用户进行输入。如果没有使用for属性，这种关联行为可能就不会发生。

    1. datalist元素：包含了一组
    2. fieldset元素：用于对表单中的控制元素进行分组(也包括label元素)

    密码输入框

    输入文本域中的文字均以星号"*"或圆点显示
    其语法格式如下：

    单选框和复选框

    1. 单选框
      在页面中，单选按钮用来让浏览者在答案之间进行单一选择，在页面中以圆框表示
      其语法格式如下：
    • value：用来设置用户选中该项目后，传送到处理程序中的值
    • name：单选按钮的名称。需要注意的是，在一组单选按钮中，往往其名称相同，这样在传递时才能更好地对某个选择内容的取值进行判断
    • checked：表示这一单选按钮默认被选中。在一组单选按钮中只能有一项单选按钮被设置为checked
    1. 复选框
      与单选框不同的是，在一组复选框中，可以设置多个复选框被默认选中
      其语法格式如下：

    使用

    按钮

    1. 普通按钮
      普通按钮在一般情况下要配合JavaScript来进行表单处理
      其语法格式如下：
    • value：按键上显示的文字
    • name：按钮名称
    • onclick：当单击按钮时所进行的处理

    1. 提交按钮
      提交按钮是一种特殊的按钮，不需要设置onclick属性，在单击该类按钮时可以实现表单内容的提交
      其语法格式如下：
      当提交按钮没有设置按钮取值时，其默认取值为"提交"。也就是在提交按钮上默认显示的文字为"提交"

    2. 重置按钮
      单击重置按钮后，可以清楚表单的内容，恢复默认的表单内容设定。
      其语法格式如下：
      当重置按钮没有设置按钮取值时，在该按钮上默认显示的文字为"重置"

      也可使用button元素来表示一个可点击的按钮

    文本域和菜单/列表

    文本域和文本框的区别在于，文本域可以显示多行文字；而菜单/列表与单选按钮或复选框相比，既可以有多个选择项，又不浪费空间，还可以减少代码量

    文本域

    它与文本框的区别在于可以添加多行文字，从而可以输入更多的文本
    其语法格式如下：

    • name：文本域的名称
    • rows：文本域的行数
    • cols：文本域的列数
    • value：文本域的默认值

    css属性resize：

    • both：默认值，两个方向都可以调整尺寸
    • none：不能调整尺寸
    • horizontal: 水平方向可以调整尺寸
    • vertical：垂直方向可以调整尺寸

    菜单/列表

    菜单列表类的控件主要用来选择给定答案中的一种，这类选择往往答案比较多，使用单选按钮比较浪费空间。可以说，菜单列表类的控件主要是为了节省页面空间而设计的。菜单和列表都是通过元素中的选项创建分组

    其他输入框

    • type=“date”：输入日期的控件（年、月、日，不包括时间）
    • type=“datetime-local”：输入日期和时间的控件，不包括时区
    • type=“range”：此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 min 和 max 来规定值的范围。
    • type=“color”：用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。
    • type=“number”：用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。

    自定义的单选框

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../reset.css">
  <title>Documenttitle>
  <style>
    .container {
      width: 190px;
      height: 65px;
      background-color: #fff;
      box-shadow: inset 0 0 5px 1px #ccc;
      margin: 2px auto;
    }

    p {
      color: #666;
      font: 14px Segoe Print;
      font-weight: bold;
      text-align: center;
      background-color: lightblue;
    }

    div.option {
      width: 80px;
      height: 20px;
      border: 2px solid #ccc;
      border-radius: 5px;
      position: absolute;
    }

    div.part-two {
      position: relative;
      height: 30px;
    }

    div.numOne {
      left: 5px;
      top: 5px;
    }

    div.numTwo {
      right: 5px;
      top: 5px;
    }

    label span.text {
      font: 12px Segoe Print;
      color: #999;
    }

    .part-two .option label span.newstyle {
      width: 13px;
      height: 13px;
      border: 1.5px solid #ccc;
      border-radius: 50%;
      box-sizing: border-box;
      display: inline-block;
      position: relative;
      left: 3px;
      top: 1.5px;
    }

    .part-two .option label:hover span[class="newstyle"] {
      border: 1.5px solid #999;
    }

    input[type="radio"]:checked+span[class="newstyle"] {
      border: 2px solid #999;
      background-color: #ccc;
    }

    input[type="radio"] {
      display: none;
    }
  style>
head>

<body>
  <div class="container">
    <div class="part-one">
      <p>Choose Your Optionp>
    div>
    <div class="part-two">
      <div class="option numOne">
        <label for="numOne">
          <input id="numOne" name="choose" type="radio">
          <span class="newstyle">span>
          <span class="text">OPTION1span>
        label>
      div>
      <div class="option numTwo">
        <label for="numTwo">
          <input id="numTwo" name="choose" type="radio">
          <span class="newstyle">span>
          <span class="text">OPTION2span>
        label>
      div>
    div>
  div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106

  • 相关阅读:
    8分钟，复习一遍红黑树
    手把手教你：LLama2原始权重转HF模型
    第一百五十三回 如何实现滑动窗口
    亿级流量高并发春晚互动前端技术揭秘
    c++ 运算符重载（二）
    关于 CMS收集器
    基于Python Django的公务员考试信息管理系统
    实战 Creator 2.x 项目升级 3.x！避坑要点与基础 API 写法差异总结
    Cross-Modal Self-Attention Distillation for Prostate Cancer Segmentation
    多线程系列(十) -ReadWriteLock用法详解
  • 原文地址：https://blog.csdn.net/weixin_42071236/article/details/126372338