form表单

form表单

 <!-- 用于提交数据的 action表单的行为，发送给服务器的地址
    method提交信息的方式，GET:从服务器获取信息 POST：向服务器提交信息-->
    <form action="https://www.baidu.com" method="POST">
        <!-- label标签是关联input的字体标题 for属性用于关联input的id -->
        <label for="account">账号:</label>
        <!-- input type属性用于确定input的类型 text输入框 
        value表示输入框的值
        placeholder 输入框的提示语  用来为用户提示
        minlength最小长度 maxlength最大长度-->
        <input type="text" id="account" value="admin" placeholder="请输入账号" minlength="2" maxlength="6">
        <br>
        <label for="password">密码:</label>
        <!-- type=password 表示 input是密文格式 -->
        <input type="password" placeholder="请输入密码" id="password">
        <br>
        <label for="num">数字框:</label>
        <!-- number表示input是数字格式  min最小  max最大 -->
        <input type="number" min="10" max="100" id="num">
        <!-- 表单中的按钮 只要是写在表单中的button点击的时候form表单
        都会提交数据-->
        <button>普通按钮</button>
        <input type="button" value="普通按钮">
        <!-- submit 提交 -->
        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">
        <!-- 图片按钮 了解 -->
        <input type="image" src="a.png" alt="图片加载失败" width="80" height="30">
        <!-- 线段 -->
        <hr>
        <!-- radio单选按钮, name属性相同才可以互斥 checked默认选中-->
        性别:<input type="radio" name="sex" id="boy" checked>
        <label for="boy">男</label>
        <input type="radio" name="sex" id="gril">
        <label for="gril">女</label>
        <br>
        爱好:
        <!-- checkbox 复选框 -->
        <input type="checkbox" id="program" checked>
        <label for="program">前端开发</label>
        <input type="checkbox" id="play">
        <label for="play">玩游戏</label>
        <input type="checkbox" id="listen">
        <label for="listen">听音乐</label>
        <hr>
        下拉框(选择框):
        <select>
            <!--optgroup选择框中的选项分组  -->
            <optgroup label="学渣">
                <!-- option选择框中的选项  value 值,不可见的
            提交表单的时候可以拿到 -->
                <option value="1">上课睡觉</option>
                <option value="2">"不跟着写"</option>
                <option value="3">偷玩手机</option>
            </optgroup>
            <optgroup label="学霸">
                <!--selected默认选中  -->
                <option value="4" selected>认真听讲</option>
                <option value="5">积极讨论</option>
                <option value="6">高质量完成作业</option>
            </optgroup>
        </select>
        <hr>
        <!-- 要求input为邮件格式 -->
        <input type="email" placeholder="点击按钮进行测试效果">
        <br>
        <!-- 上传文件 -->
        <input type="file">
        <!-- 只传值，不被用户看到  隐藏域-->
        <input type="hidden" value="为服务器发送值">
        <br>
        <!-- 滑杆 -->
        <input type="range" name="" id="">
        <!-- 输入面板 -->
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </form>