2021-07-14 input标签

input标签、label标签、form标签

这是今天早上我主要学习的内容

<!-- input标签的属性 -->
    <!-- name 控件名称 -->
    <!-- value="" 输入框的值 -->
    <!-- placeholder="" 占位符 -->
    <!-- disabled 禁用表单控件 -->
    <!-- readonly 让表单只读，无法输入 -->
    <!-- autofocus 页面刷新时, 自动聚焦该表单控件  一个html页面中只能有一个该属性-->
    <!-- checked 控件默认被选中状态 -->
    <!-- alt=""  当type=image  处于对可访问性的考虑 -->、
    <!-- accept=".ppt"  当type="file"时为文件域, 用来控制上传的文件类型 -->
    <!-- autocomplete 用于表单的自动填充 on/off(开/关)-->
    <!-- step="2" range类型和number类型, 数值递增递减的步长 -->
    <!-- min="0" max="100" range类型和number类型，可以控制最大和最小值 (超出范围有提示)-->
    <!--minlength=""输入框输入的最小长度   maxlength=""输入框输入的最大长度 -->

<h3>输入类型的输入框</h3>
    <!-- type属性表示input的控件类型 -->
    <input style="width: 100px; height: 100px;" type="text" value="单行文本输入框" autofocus> <br>
    <input type="text" placeholder="单行文本输入框" name="username" > <input type="submit"></form>
    <input  type="password" placeholder="请输入密码" disabled> <br>

    <input type="number" placeholder="请输入数字" name="a" step="4"> <br>  （每次递增递减的值以4为单位）
    <input type="number" placeholder="请输入数字" name="a"  min="1" max="5"> <br> （数字最小为1，最大为5）

    <input type="email" placeholder="请输入邮箱" value="houanz@163.com" readonly> <br>
    <input  type="tel" placeholder="请输入手机号码" pattern="^\d{11}$" > <br>
    <input type="url" placeholder="请输入网址" > <br>
    <input type="search" placeholder="搜索类型的输入框"> <br>
    
    <!-- 按钮类型的输入框 -->
    <h3>复选框</h3>
    <div>
        <div><input type="checkbox" checked> HTML </div>
        <div><input type="checkbox"> JAVA</div>
        <div><input type="checkbox"> C++</div>
        <div><input type="checkbox"> python</div>
    </div>

    <hr>
    <h3>单选框: 需要加上name属性</h3>
    <input type="radio" name="sex" checked> 男
    <input type="radio" name="sex"> 女

    <hr>
    <h3>按钮类型的input</h3>
    <input type="button" value="button按钮">
    <input type="submit">
    <input type="reset">

    <hr>
    <h3>文件域</h3>
    <input type="file" accept=".txt">
    <h3>图像域 (本质还是一个提交按钮)</h3>
    <input width="100px" height="100px" type="image" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="这是百度logo">
    <h3>隐藏域</h3>
    <input type="hidden">

    <hr>
    <h3>其他的控件类型</h3>
    <input type="color"> 颜色<br>

    <input type="range" step="0.1" min="0" max="100"> 滑块<br> （step越小，滑块越流畅）
    <input type="date"> 日期<br>
    <input type="time"> 时间<br>
    <input type="datetime-local" name="" id=""> 日期和时间 <br>
    <input type="week"> 输入以年和周数组成的日期  <br>
    <input type="month"> 输入年和月 <br>

label标签有两种用法，可以提高使用体验
label标签的两种用法:

        id的关联:
        
        <label for="id">点这里</label>
        <input id="id" type="text" placeholder="请点击"> 
        
        嵌套的关联:
        <label> 点这里 <input id="id" type="text" placeholder="点击文字可以选择输入框"><label> 

form表单的属性有：

<!-- action="数据的提交地址" 服务器地址 请求地址 -->
<!-- method="数据的提交方式"  get(明文传输数据)  post(密码不明文传输) -->
<!-- target="数据提交以后,如何打开新的页面？"  _self(默认当前窗口打开) _blank(新窗口打开) _parent(iframe父窗口刷新) _top(刷新当前页面成新链接)-->

<form action="" method="get" target="_self">
       <label for="uname">用户名:</label>
       <input id="uname" type="text" placeholder="请输入用户名" name="uname" autocomplete="off">   <br>

       <label for="upass">密码:</label>
       <input id="upass" type="password" placeholder="请输入密码" name="upass" >  <br>

        <div>性别:
            <label><input type="radio" name="sex" value="1" checked> 男</label>
            <label><input  type="radio" name="sex" value="2"> 女</label>
        </div>

        <div>爱好:
            <label><div><input type="checkbox" name="hobby" value="吃饭">吃饭</div></label>
            <label><div><input type="checkbox" name="hobby" value="旅游">旅游</div></label>
            <label><div><input type="checkbox" name="hobby" value="LOL">LOL</div></label>
            <label><div><input type="checkbox" name="hobby" value="学习">学习</div></label>
        </div>

        <input type="submit" value="提交数据">
        <input type="reset">

    </form>