表单标记form

news2024/11/16 13:30:29

1.form:表单域标记，表示表单范围，所有的表单元素必须放进form标记中

2.input:用来设置表单输入元素，<input>元素根据不同的属性，可以有多种形式，如文本框（text）,密码框（password）,单选框（radio）,复选框（checkbox）,按钮（button）,提交按钮（submit）

3.option:下拉列表标记，通过option元素定义下拉选项

4.textarea:文本域标记

写了大量注释哦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>


<body>
    <h1>表单标记</h1>


    <!-- 
    表单常见属性
    name:表单域名字
    action:设置跳转链接
    method:表单跳转方法，决定了表单中已经收集的数据以何种方式发送到服务器端有post get两种
    onsubmit:处理表单的脚本程序
    -->

    <form action="后端处理程序" method="post">

        <!-- 
        type类型
        text:单行文本框
        password:密码框
        radio:单选按钮
        checkbox:复选框
        submit：提交按钮 
        reset:重置按钮
        button:普通按钮
        file:文件域
        hidden:隐藏域
         -->
        
         <!--文本框 
            maxlength:
            size:文本框长度,默认24px,px表示像素
            value:文本框默认值 
         -->
        <p>文本框：<input type="text" size="30"></p>    
        <!-- 密码框
            maxlength:
            size:文本框长度,默认24px,px表示像素
            value:文本框默认值 
        -->
        <p>密码框：<input type="password"></p>
        <!--单选按钮
            name:设置按钮的名称，对单选按钮中的多个按钮，任何时刻只能一个被选中
            value:按钮选中后传到服务器中的值
            checked:表示单选按钮被选中 
            注意这里的name值要一样，不然就不是单选框了，（而是双选框）
         -->
        <p>单选框：<input type="radio" name="r">男 <input type="radio" name="r" id="">女</p>

        
        <!-- 复选框
            name:设置按钮的名称，对单复选按钮组中的多个按钮，同一时刻可以对格被选中
            value:按钮选中后传到服务器中的值
            checked:表示复选按钮被选中 
        -->
        <p>兴趣爱好:
            <input type="checkbox" name="c1">跑步锻炼
            <input type="checkbox" name="c1">写算法
            <input type="checkbox" name="c1">阅读
        </p>

        <!-- 下拉列表框
            name:设置列表名称
            value:选项的值
            selected:选中的选项 
            属性：
            size:列表中同时显示的个数，默认为1
            multiple:设置列表项目可以多选
        -->
        <p>省份：
            <!-- 指定每次只能选一个 -->
            <select size="1">
                <option value="1">天津</option>
                <option value="2">北京</option>
                <option value="">新疆</option>
                <option value="">内蒙古</option>
            </select>
        </p>
        
        <!-- 文本域标记
            name:文本域名称
            rows:设置文本域的行数
            cols:设置文本域的列数 
        -->
        <p><textarea rows="10" cols="20">
            留言信息
        </textarea></p>
        
        <!-- 提交按钮
            name:设置按钮名称
            value:提交按钮上显示的文本 
        -->
        <input type="submit">
         <!-- 重置按钮
            name:设置按钮名称
            value：重置按钮上显示的文本 
        -->
        <input type="reset">
        <!--普通按钮 
            name:设置按钮名称
            value：重置按钮上显示的文本 
            onclick:表示处理表单的脚本函数
        普通按钮没有默认值，需要设置value值
         submit和reset也可以通过设置value值改变按钮名称 -->
        <input type="button" value="普通按钮">   <br>
        
        <!--文件域
            name:设置文件域的名称
        -->
        <p>文件域: <input type="file"> </p>

        <!-- 隐藏域
            name:隐藏域名字
            value:影藏域传递的名字
            是一个隐藏的区域，浏览者无法看到，主要用途是在不同页面之间传递数据

        -->
        <p><input type="hidden"></p>

    </form>
</body>
</html>