• HTML表单元素-输入框

    2、表单元素-输入框

    输入框使用input标签。

    标签，根据type属性的不同，会有不同的表现样式。默认type="text"，也就是文本输入框。

    2.1、文本输入框

    单行的文本区域，（输入中的换行会被自动去除）。

    1. <input type="text"
    2.     name="username"
    3.     maxlength="6"
    4.     readonly="readonly"
    5.     disabled="disabled"
    6.     value="用户名" />

    type：type="text" 表示文本输入框

    name：输入框的名字

    maxlength：文本框能输入的最大字符数。

    minlength：文本框能输入的最小字符数。

    readonly：文本框只读

    disabled：文本框禁用

    value：输入框中的默认内容

    placeholder：输入框中的提示语

    2.2、密码输入框

    用于输入密码的控件。

    <input type="password" />

    注意：密码字段字符不会明文显示，而是以星号 * 或圆点 · 替代。

    PS：文本输入框的所有属性对密码输入框都有效

    2.3、数字输入框

    用于输入数字的控件。

    <input type="number" name="num" step="2" />

    step：默认情况下，向上和向下按钮可以将值增加或减小 1。通过使用step 属性来更改此步长值。

    min：最小值

    max：最大值

    注意：min和max只是点击上下按钮不会让你低于 min 或高于 max 的值，但是可以通过手动输入数字。

    2.3、单选框

    radio 类型元素默认渲染为小型圆圈图表，填充即为激活，也就是我们所说的选中效果。

    1. <input type="radio" name="gender" checked="checked" />男
    2. <input type="radio" name="gender" />女

    checked="checked" 或者直接写 checked，可以设置默认选中的项。

    单选效果：当有多个单选框是如何设置只能有一个被选中？默认的情况下，单选框是独立存在的，如果要实现单选切换效果，需要将 name 的值设置相同，才能实现单选效果。

    20181009

    设置单选框的样式：

    由于单选框的样式是只能设置大小，不能设置颜色，更不能设置样式。所以，一般我们自定义单选框的样式。

    实现原理：

    在单选框的后面加上label标签（需要设置为inline-block或者block），在点击单选框的时候，使用 + 选择器选中label标签，设置label标签的宽高和颜色代替单选框，将单选框display:none；

    代码：

    1. html>
    2.  
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Documenttitle>
    7.     <style>
    8.         input {
    9.             display: none;
    10.         }
    11.         label {
    12.             display: inline-block;
    13.             width: 30px;
    14.             height: 30px;
    15.             background-color: #ccc;
    16.             border-radius: 50%;
    17.             vertical-align: middle;
    18.         }
    19.         input:checked + label {
    20.             background-color: red;
    21.         }
    22.     style>
    23. head>
    24.  
    25.  
    26. <body>
    27.     <input type="radio" name="sex" id="a"><label for="a" />男
    28.     <input type="radio" name="sex" id="b"><label for="b" />女
    29.     <input type="radio" name="sex" id="c"><label for="c" />保密
    30. body>
    31.  
    32.  
    33. html>

    9a6d3f87dedd82b1adb8d4a1e448b37d.gif

    另外，我们还可以实现选项卡效果，代码如下：

    1. html>
    2.  
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Documenttitle>
    7.     <style>
    8.         * {
    9.             padding: 0;
    10.             margin: 0;
    11.         }
    12.         ul {
    13.             position: relative;
    14.         }
    15.         li {
    16.             list-style: none;
    17.             float: left;
    18.         }
    19.         input {
    20.             outline: none;
    21.         }
    22.         input[type="radio"] {
    23.             display: none;
    24.         }
    25.         label {
    26.             display: block;
    27.             text-align: center;
    28.             line-height: 42px;
    29.             width: 124px;
    30.             height: 42px;
    31.             color: rgb(227,64,5);
    32.             border-bottom: 1px solid rgb(227,64,5);
    33.             cursor: pointer;
    34.         }
    35.         input:checked + label {
    36.             background-color: rgb(227,64,5);
    37.             color: #fff;
    38.         }
    39.         li .dv1,
    40.         li .dv2 {
    41.             width: 248px;
    42.             height: 50px;
    43.             /* background-color: #ddd; */
    44.             position: absolute;
    45.             display: none;
    46.         }
    47.  
    48.  
    49.         .dv1 {
    50.             position: relative;
    51.             left: 0;
    52.             top: 42px;
    53.         }
    54.         .dv2 {
    55.             left: 0;
    56.             top: 42px;
    57.         }
    58.  
    59.  
    60.         input:checked + label + div {
    61.             display: block;
    62.         }
    63.  
    64.  
    65.         .txt1 {
    66.             position: absolute;
    67.             width: 200px;
    68.             height: 30px;
    69.             left: 50%;
    70.             top: 50%;
    71.             margin-left: -100px;
    72.             margin-top: -15px;
    73.         }
    74.         .txt1 input[type="text"] {
    75.             width: 150px;
    76.             height: 30px;
    77.             vertical-align: top;
    78.             float: left;
    79.             box-sizing: border-box;
    80.             border: 1px solid rgb(227,64,5);
    81.             border-radius: 10px 0 0 10px;
    82.             padding-left: 5px;
    83.         }
    84.         .txt1 input[type="submit"] {
    85.             width: 50px;
    86.             height: 30px;
    87.             float: left;
    88.             border: 1px solid rgb(227,64,5);
    89.             border-radius: 0 10px 10px 0;
    90.             margin-left: -1px;
    91.             background-color: rgb(227,64,5);
    92.             color: white;
    93.         }
    94.         .txt2 {
    95.             position: absolute;
    96.             width: 200px;
    97.             height: 30px;
    98.             left: 50%;
    99.             top: 50%;
    100.             margin-left: -100px;
    101.             margin-top: -15px;
    102.         }
    103.         .txt2 input[type="text"] {
    104.             width: 150px;
    105.             height: 30px;
    106.             vertical-align: top;
    107.             float: left;
    108.             box-sizing: border-box;
    109.             border: 1px solid rgb(227,64,5);
    110.             border-radius: 10px 0 0 10px;
    111.             padding-left: 5px;
    112.         }
    113.         .txt2 input[type="submit"] {
    114.             width: 50px;
    115.             height: 30px;
    116.             float: left;
    117.             border: 1px solid rgb(227,64,5);
    118.             border-radius: 0 10px 10px 0;
    119.             margin-left: -1px;
    120.             background-color: rgb(227,64,5);
    121.             color: white;
    122.         }
    123.     style>
    124. head>
    125.  
    126.  
    127. <body>
    128.     <div class="box">
    129.         <form action="">
    130.  
    131.  
    132.             <ul class="uu">
    133.                 <li>
    134.                     <input type="radio" name="yz" id="a" checked>
    135.                     <label for="a">客服验证label>
    136.                     <div class="dv1">
    137.                         <div class="txt1">
    138.                             <input type="text" placeholder="请输入需要验证的QQ号">
    139.                             <input type="submit" value="验证">
    140.                         div>
    141.                     div>
    142.                 li>
    143.                 <li>
    144.                     <input type="radio" name="yz" id="b">
    145.                     <label for="b">网址验证label>
    146.                     <div class="dv2">
    147.                         <div class="txt2">
    148.                             <input type="text" placeholder="请输入需要验证的网址">
    149.                             <input type="submit" value="验证">
    150.                         div>
    151.                     div>
    152.                 li>
    153.             ul>
    154.         form>
    155.     div>
    156.  
    157.  
    158. body>
    159.  
    160.  
    161. html>

    效果：

    d098e22c0c965639a75a10b15706295c.gif

    2.4、多选框

    复选框可以选取一个或多个选项：

    1. 第一个多选框：<input type="checkbox" checked="checked" value="one" />
    2. 第二个多选框：<input type="checkbox" checked />

    value：复选框选中时的值。如果省略，则默认为"on"。

    注意：所有的  元素都有 value 属性；但是，它对 checkbox 类型的输入有特殊作用：当表单被提交时，只有当前被选中的复选框会被提交给服务器，值就是 value 属性的值。如果没有指定 value，默认为字符串 on。

    2.5、文本上传控件

    文本上传控件允许用户可以从他们的设备中选择一个或多个文件。选择后，这些文件可以使用提交表单的方式上传到服务器上。

    <input type="file" />

    accept：表示允许的文件类型（accept="image/*,.pdf" 表示任何图片文件或者pdf文件。

    multiple：如果出现，则表示用户可以选择多个文件

    20181009 修改文本上传控件的样式：

    实现原理：

    由于上传控件的大小和颜色等是无法直接修改的，若想要修改的话，可以另外添加一个div，将div的大小设置和file控件的大小一致，将div定位，之后file文件也进行定位，覆盖到div之上（可以设置z-index），然后设置file控件的opacity为0即可。

    示例：

    1. html>
    2.  
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Documenttitle>
    7.     <style>
    8.         input {
    9.             width: 180px;
    10.             height: 60px;
    11.             background-color: pink;
    12.             position: absolute;
    13.             left: 0;
    14.             top: 0;
    15.             z-index: 1;
    16.             opacity: 0;
    17.         }
    18.         div {
    19.             width: 180px;
    20.             height: 60px;
    21.             background-color: #37f;
    22.             color: white;
    23.             text-align: center;
    24.             line-height: 60px;
    25.             position: absolute;
    26.             left: 0;
    27.             top: 0;
    28.         }
    29.     style>
    30. head>
    31.  
    32.  
    33. <body>
    34.     <input type="file" />
    35.     <div>点击上传div>
    36. body>
    37.  
    38.  
    39. html>

    0a7279c250c0b113d71790feed372978.png

    2.6、文件提交按钮

    文件提交按钮，可以实现信息提交功能。

    当用户单击确认按钮时，表单的内容会被传送到服务器。表单form的属性 action 定义了服务端的文件名。

    1. <form name="input" action="html_form_action.php" method="get">
    2.     用户名: <input type="text" name="user">
    3.     <input type="submit" value="Submit">
    4. form>

    比如在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件。

    2.7、按钮

    用来创建一个没有默认值的可点击按钮。已经在 HTML5 被 

  • 相关阅读:
    数据存储技术的相关概念
    Maven[项目构建工具]
    java计算机毕业设计基于安卓Android的宿舍服务平台APP
    Java刷题day34
    【C++】详细讲解函数使用，带你玩转C++函数~
    下载github.com上的依赖资源
    深入学习Semantic Kernel：创建和配置prompts functions
    Java设计模式之模板方法模式
    学习typescript（1）
    Excel·VBA考勤打卡记录统计结果
  • 原文地址：https://blog.csdn.net/lvonve/article/details/127711719