表单学习-DAY-05

 1.input单行输入框

        input:定义输入框、按钮等,单标签。

                type:定义input的类型(值不同对应的input的功能或样式都会发生改变。)

                        值:

                                text:文本输入框。

                                password:定义密码输入框,输入的内容会被掩盖。

                                button:定义按钮。

                                submit: 定义提交按钮。

                                reset:重置按钮,清除表单内所有的数据。

                                file:文件提交按钮,供文件上传。

                                image:定义图片形式的提交按钮,必须把src和image结合使用。

                                checkbox:定义复选框

                                radio:定义单选框

                value:定义input的初始值。

                required:必填项,不能为空。

                readonly:只读模式,无法输入,只能阅读。

                disabled:禁用input元素。

                placeholder:定义文本输入框的提示。

                name:定义输入框的名字,唯一。

                maxlength:定义输入框可以输入的最大字符。

                size:定义文本输入框的宽度。

补充:     label: 给input添加的标注。

                        for: 为了让input和label进行绑定。

                        for的值要和input的值相同,当点击label时,可以让input自动获得焦点

2.textarea多行文本框

        textarea:定义多行文本框

                cols: number,规定文本区内的可见宽度

                rows: number,规定文本区内的可见高度

3.单选框多选框下拉框

        checkbox:定义复选框

        radio:定义单选框

        fieldset:将表单内容进行分组,会产生一个边框(默认为2px,内边距(10px,12px),左右外边距2px)

        legend:legend时fieldset元素定义的标题(默认在分组边框的上边框内,可以左右移动位置);

        select:定义下拉菜单。

                optgroup:定义选项组。

                option:定义列表中的一个选项内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
    <form action="#">
        <!-- form表单
        action:当表单提交的时候,将数据发往哪里
         -->
        <div>
            <!-- 
                input:定义输入框、按钮等,单标签。
                    type:定义input的类型(值不同对应的input的功能或样式都会发生改变。)
                        值:
                            text:文本输入框。
                            password:定义密码输入框,输入的内容会被掩盖。
                            button:定义按钮。
                            submit: 定义提交按钮。
                            reset:重置按钮,清除表单内所有的数据。
                            file:文件提交按钮,供文件上传。
                            image:定义图片形式的提交按钮,必须把src和image结合使用。
                            checkbox:定义复选框
                            radio:定义单选框
                    value:定义input的初始值。
                    required:必填项,不能为空。
                    readonly:只读模式,无法输入,只能阅读。
                    disabled:禁用input元素。
                    placeholder:定义文本输入框的提示。
                    name:定义输入框的名字,唯一。
                    maxlength:定义输入框可以输入的最大字符。
                    size:定义文本输入框的宽度。
             -->
            <!-- 
                label: 给input添加的标注。
                for: 为了让input和label进行绑定。
                for的值要和input的值相同,当点击label时,可以让input自动获得焦点
             -->
            <label for="account">账号:</label>
            <input type="text" name="account" id="account" value="" placeholder="请输入账号:" required maxlength="10" size="20px">
            <br>
            <label for="password">账号:</label>
            <input type="password" name="password" id="password" value="" placeholder="请输入密码:" required maxlength="16" size="20px">
            <br>
            <!-- 
                textarea:定义多行文本框
                cols: number,规定文本区内的可见宽度
                rows: number,规定文本区内的可见高度
             -->
            <textarea name="" id="" cols="30" rows="10"></textarea>
            <br>
            <input type="submit">
            <hr>
        </div>
        <div>
            <!-- 
                button:定义可点击的按钮
                    value:按钮的标题
            -->
            <input type="button" value="登录"><br>
            <!-- 
                submit:定义提交按钮,会把表单内的数据提交给服务器
             -->
            <input type="submit" name="" id=""><br>
            <!-- 
                reset:重置按钮,清除表单内所有的数据。
             -->
            <input type="reset" name="" id=""><br>
             <!-- 
                file:文件提交按钮,供文件上传。
                    accept:规定文件上传的类型,text/*文本类型
              -->
            <input type="file" accept="image/*">
            <br>
            <!-- 
                image:定义图片形式的提交按钮,必须把src和image结合使用 -->
            <input type="image" src="../../2022_7_13/练习/daxue.png" alt="提交按钮">
        </div>
        <div>
            <!-- 多选框 -->
            <!-- 
                checkbox:定义复选框 -->
            <label for="checkbox1">多选框1</label>
            <input type="checkbox" id="checkbox1">
            <label for="checkbox2">多选框1</label>
            <input type="checkbox" id="checkbox2">
            <!-- 单选框 
                radio:定义单选框
            -->
            性别:
            <input type="radio" name="sex" id="nan"><label for="nan">男</label>
            <input type="radio" name="sex" id="nv"><label for="nv">女</label>
            <!-- 
                fieldset:将表单内容进行分组,会产生一个边框(默认为2px,内边距(10px,12px),左右外边距2px)
                legend:legend时fieldset元素定义的标题(默认在分组边框的上边框内,可以左右移动位置);
            -->
            <fieldset>
                <legend>分组标题</legend>
            </fieldset>
            <!-- 
                select:定义下拉菜单。
                optgroup:定义选项组。
                option:定义列表中的一个选项内容。
            -->
            <select name="" id="">
                <optgroup label="上午">
                    <option value="1">上课1</option>
                    <option value="2">上课2</option>
                    <option value="3">上课3</option>
                    <option value="4">上课4</option>
                    <option value="5">上课5</option>
                <optgroup label="上午">
                    <option value="1">上课1</option>
                    <option value="2">上课2</option>
                    <option value="3">上课3</option>
                    <option value="4">上课4</option>
                    <option value="5">上课5</option>
                </optgroup>
            </select>
        </div>
    </form>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值