表单标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>11.表单标签.html</title>
    </head>
    <body>
        <!--form表单
            ation属性:相当于超链接中的href属性
                     本地资源,网络资源
            method属性: 表单的提交方式
                     get 默认:将表单中数据显示在地址栏中
                     post 将表单中数据隐藏
            label:没有意义的标签,一般情况下用于表单
            input标签:
                type属性:
                    text表示文本框
                    password表示密码框
                    submit:提交按钮,点击提交按钮表单和表单中的数据会一块提交给action属性中的目标
                    reset:重置按钮,会让页面还原第一次打开时界面
                    button:普通按钮,没有任何功能,需要和Javascript语言结合
                    radio:单选按钮
                    checkbox:多选按钮
                    number:只能输入数字
                    date:年月日
                    time:时分
                    email:邮箱
                    file:上传(如果需要完成上传,需要服务器的后台处理,需要流技术)
                    hidden:隐藏组件不显示
            select标签:下拉组件,下拉选
                    option子标签
            textarea标签:文本域,多行文本框
                        
                size属性:组件长度
                maxlength:组件中的字符个数
                disabled:组件不可用,表单提交时数据不会提交
                readonly:组件只读,表单提交时数据会正常提交
                value:表示组件中的数据值
                placeholder:提示信息
                本身没有作用的三个属性:
                name:为标签定义一个名称(自定义名称,后期的servlet技术中需要使用该属性)
                id:为标签定义一个编号(自定义名称,该编号在html文件中不允许重复
                                    css,javascript,jquery...会使用)
                class:为标签定义一个类别(自定义名称,css,javascript,jquery...会使用)
             -->
         <form action="http://www.jd.com" method="get">
             <label>账号:</label>
             <input type="text" size="30px" maxlength="20"
                placeholder="请输入账号" name="username" id="username2" class="username3"
                value="张三"  readonly
              /><br />
             <label>密码:</label>
                <input type="password" placeholder="请求输入密码"  name="password" /><br />
             <label>性别:</label>
                <!--多个选项中的name值一致,为一组,一组中只能选择一个 
                    checked:默认选中,页面打开默认选中一个值
                 -->
                <input type="radio" name="sex" value="男1" /><input type="radio" name="sex" value="女1" checked /><input type="radio" name="sex" value="未知" />未知 
                <br />
            <label>爱好:</label>
                <input type="checkbox" name="hobby" value="编程1" />编程
                <input type="checkbox" name="hobby" value="游戏1" />游戏
                <input type="checkbox" name="hobby" value="读书1" />读书
                <input type="checkbox" name="hobby" value="旅游1" />旅游
                <input type="checkbox" name="hobby" value="吃饭1" />吃饭
                <br />
            <label>数字:</label>
                <input type="number" name="number" />    <br />
            <label>日期:</label>
                <input type="date" name="date" />    <br />
            <label>时间:</label>
                <input type="time" name="time" />    <br />
            <label>邮箱:</label>
                <input type="email" name="email" />    <br />
            <label>上传:</label>
                <input type="file" name="file" />    <br />    
            <label>隐藏域:</label>
                <input type="hidden" name="id" value="123" />    <br />    
            <label>部门:</label>    
            <select name="dept">
                <option value="技术部1">技术部</option>
                <option value="财务部1">财务部</option>
                <option value="销售部1">销售部</option>
                <option value="后勤部1">后勤部</option>
            </select>    <br />
            <label>说明:</label>    
            <textarea rows="20" cols="20"></textarea> <br />
             <!-- html中存在三个按钮
                submit:提交按钮,点击提交按钮表单和表单中的数据会一块提交给action属性中的目标
                reset:重置按钮,会让页面还原第一次打开时界面
                button:普通按钮,没有任何功能,需要和Javascript语言结合
             -->
             <input type="submit" value="登录" />
             <input type="reset"  value="还原" />
             <input type="button" value="普通按钮"/>
         </form>
    </body>
</html>

 

posted @ 2022-07-17 13:26  鹿先森JIAN  阅读(52)  评论(0编辑  收藏  举报