HTML表单元素-输入框

2、表单元素-输入框

输入框使用input标签。

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

2.1、文本输入框

单行的文本区域,(输入中的换行会被自动去除)。

<input type="text"
    name="username"
    maxlength="6"
    readonly="readonly"
    disabled="disabled"
    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 类型元素默认渲染为小型圆圈图表,填充即为激活,也就是我们所说的选中效果。

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

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

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

20181009

设置单选框的样式:

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

实现原理:

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

代码:

<!DOCTYPE html>


<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input {
            display: none;
        }
        label {
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #ccc;
            border-radius: 50%;
            vertical-align: middle;
        }
        input:checked + label {
            background-color: red;
        }
    </style>
</head>


<body>
    <input type="radio" name="sex" id="a"><label for="a" />男
    <input type="radio" name="sex" id="b"><label for="b" />女
    <input type="radio" name="sex" id="c"><label for="c" />保密
</body>


</html>

9a6d3f87dedd82b1adb8d4a1e448b37d.gif

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

<!DOCTYPE html>


<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            position: relative;
        }
        li {
            list-style: none;
            float: left;
        }
        input {
            outline: none;
        }
        input[type="radio"] {
            display: none;
        }
        label {
            display: block;
            text-align: center;
            line-height: 42px;
            width: 124px;
            height: 42px;
            color: rgb(227,64,5);
            border-bottom: 1px solid rgb(227,64,5);
            cursor: pointer;
        }
        input:checked + label {
            background-color: rgb(227,64,5);
            color: #fff;
        }
        li .dv1,
        li .dv2 {
            width: 248px;
            height: 50px;
            /* background-color: #ddd; */
            position: absolute;
            display: none;
        }


        .dv1 {
            position: relative;
            left: 0;
            top: 42px;
        }
        .dv2 {
            left: 0;
            top: 42px;
        }


        input:checked + label + div {
            display: block;
        }


        .txt1 {
            position: absolute;
            width: 200px;
            height: 30px;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -15px;
        }
        .txt1 input[type="text"] {
            width: 150px;
            height: 30px;
            vertical-align: top;
            float: left;
            box-sizing: border-box;
            border: 1px solid rgb(227,64,5);
            border-radius: 10px 0 0 10px;
            padding-left: 5px;
        }
        .txt1 input[type="submit"] {
            width: 50px;
            height: 30px;
            float: left;
            border: 1px solid rgb(227,64,5);
            border-radius: 0 10px 10px 0;
            margin-left: -1px;
            background-color: rgb(227,64,5);
            color: white;
        }
        .txt2 {
            position: absolute;
            width: 200px;
            height: 30px;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -15px;
        }
        .txt2 input[type="text"] {
            width: 150px;
            height: 30px;
            vertical-align: top;
            float: left;
            box-sizing: border-box;
            border: 1px solid rgb(227,64,5);
            border-radius: 10px 0 0 10px;
            padding-left: 5px;
        }
        .txt2 input[type="submit"] {
            width: 50px;
            height: 30px;
            float: left;
            border: 1px solid rgb(227,64,5);
            border-radius: 0 10px 10px 0;
            margin-left: -1px;
            background-color: rgb(227,64,5);
            color: white;
        }
    </style>
</head>


<body>
    <div class="box">
        <form action="">


            <ul class="uu">
                <li>
                    <input type="radio" name="yz" id="a" checked>
                    <label for="a">客服验证</label>
                    <div class="dv1">
                        <div class="txt1">
                            <input type="text" placeholder="请输入需要验证的QQ号">
                            <input type="submit" value="验证">
                        </div>
                    </div>
                </li>
                <li>
                    <input type="radio" name="yz" id="b">
                    <label for="b">网址验证</label>
                    <div class="dv2">
                        <div class="txt2">
                            <input type="text" placeholder="请输入需要验证的网址">
                            <input type="submit" value="验证">
                        </div>
                    </div>
                </li>
            </ul>
        </form>
    </div>


</body>


</html>

效果:

d098e22c0c965639a75a10b15706295c.gif

2.4、多选框

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

第一个多选框:<input type="checkbox" checked="checked" value="one" />
第二个多选框:<input type="checkbox" checked />

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

注意:所有的 <input> 元素都有 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即可。

示例:

<!DOCTYPE html>


<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input {
            width: 180px;
            height: 60px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            opacity: 0;
        }
        div {
            width: 180px;
            height: 60px;
            background-color: #37f;
            color: white;
            text-align: center;
            line-height: 60px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>


<body>
    <input type="file" />
    <div>点击上传</div>
</body>


</html>

0a7279c250c0b113d71790feed372978.png

2.6、文件提交按钮

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

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

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

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

2.7、按钮

用来创建一个没有默认值的可点击按钮。已经在 HTML5 被 <button>元素取代。

<input type="button" value="input按钮"> 


<!--HTML5方式-->
<button>button按钮</button>

区别:<button>在form里面,默认可以进行提交操作,除非设置type=button;而input按钮需要配合JS进行提交。

2.8、重置按钮

此按钮点击后,会将表单的所有内容重置为输入前的初始值(一般为空值)。不推荐使用。

<input type="reset">

文章出处登录后可见!

已经登录?立即刷新

共计人评分,平均

到目前为止还没有投票!成为第一位评论此文章。

(0)
xiaoxingxing的头像xiaoxingxing管理团队
上一篇 2023年3月5日 下午3:02
下一篇 2023年3月5日 下午3:03

相关推荐