表单_biao'danbiaodancsdn-CSDN博客

本文链接：https://blog.csdn.net/m0_37264741/article/details/94594347

<label> 标签为input标签绑定，

label 元素不会向用户呈现任何特殊效果。

不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<form action=""><!--创建表单-->

    <label for="i1">
        姓名:<input type="text" id="i1">
    </label>
    
</form>

</body>
</html>

input属性

type="text"

type="password"#输入的内容看起来都是小黑点

value 输入框内的默认内容

placeholder 输入框内的灰体字，鼠标点进去消失

maxlength="8" 最大输入字符数是8 ，输入框内最大输入的字符数是8

size 拓宽单行文本框

readonly 输入框内的内容无法修改，无法删除，只读

<label for="t1">文本框:
        <textarea id="t1" rows="10" cols="50"> aaaaaa </textarea>
    </label>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<form action=""><!--创建表单-->

    <label for="i1">
        姓名:<input type="text" id="i1">
    </label>

    <label for="i2">用户名
        <input type="text" value="用户名/手机号" id="i2"><!--鼠标点进去value还在-->
    </label>

    <label for="i3">密码
        <input type="text" placeholder="密码" id="i3"><!--鼠标点进去value不在了-->
    </label>

</form>

</body>
</html>

按钮

<button id="t1">按钮</button>
<input type="button" value="按钮"><!--多和js连用-->
<input type="submit" name="" id="" value="提交">

<input type="range" id="t1" min="-100" max="300" value="10" step="50"><!--定义一个滑动输入，最小值-100，最大值300，默认值在100-->

<input type="number" min="-100" max="100" value="50" id="t1"><!--最小值-100，最大值100，初始值50。输入的内容超不过这个范围-->

选择框

<form action=""><!--创建表单-->
    <label for="i1">
        <input type="checkbox" name="a" id="i1">选择1
    </label>
    <label for="i2">
        <input type="checkbox" name="b" id="i2">选择2
    </label>
    <label for="i3">
        <input type="radio" name="c" id="i3" >单选1<!--单选框的name属性必须都是一样的-->
    </label>
    <label for="i4">
        <input type="radio" name="c" id="i4">单选2
    </label>
    <label for="i5">
        <input type="radio" name="c" id="i5" checked>单选3
    </label>
</form>

<form action=""><!--创建表单-->
    <label for="i1">
        选择城市
        <select id="i1">
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
        </select>
    </label>

        <br>

    <label for="d3">
        可以自己输入喜欢的城市,也可以选择
        <input type="text" list="d2" id="d3">
        <datalist id="d2">
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
        </datalist>
    </label>


</form>

验证输入的手机号/邮箱/电话号

<input type="url">
<input type="email">
<input type="tel">
<input type="submit" name="" id="">

<input type="date">
<input type="datetime-local">

获取颜色
<input type="color">

<input type="search"><!--获取搜索用词-->

<input type="hidden" name="a" value="1"><!--提交表单时，会有这个input框的内容name=a,value=1-->

网页中不会显示hidden的内容

图片按钮
<input alt="something" type="image"  src="timg.jpg" width="80">

<form enctype="multipart/form-data" action=""><!--上传文件时必须要设置enctype="multipart/form-data"-->
    <label >
        <input type="file" multiple><!--可以上传多个文件-->
        <input type="file" required><!--只能上传一个文件-->
    </label>
</form>