表单

作者: OmewSPG | 来源:发表于2021-11-02 09:33 被阅读0次

    表单的目的

    表单是为了收集用户信息而存在的,是网页中常见的与用户进行交互的一种方式

    表单的组成

    一个完整的表单由表单域、表单控件与提示信息组成


    表单组成.PNG

    表单域

    定义整个表单范围的元素,在表单域中设定submit按钮之后,可以提交当前表单域中所有的数据到指定url地址。表单域内部可以包含大部分标签元素,它在页面上并不会体现出具体的结构,而是作为一张表单所需收集数据的限定范围


    表单域.PNG

    表单控件

    用来定义各种表单元素,允许用户在表单中输入或选择的内容控件(输入框,选择按钮或者下拉菜单等)
    input、select和textarea都是表单控件的三种元素

    input表单元素

    input表单元素.PNG

    其中,type属性值有以下类型,他们具体的作用是改变input表单元素的形态,亦或是文本框的输入方式


    input表单元素的type值.PNG

    这是实现表单的必要属性,除此之外,input元素还具有以下其它属性


    input属性.PNG

    label标签

    label作为html双标签结构,仅在网页上显示出所包括的提示信息
    label常常会和网页上的表单控件元素绑定到一起使用,比如说:


    label标签.PNG

    select元素

    select表单元素.PNG

    textarea

    textarea表单元素.PNG

    一个表单的实例

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <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>Document</title>
    </head>
    
    <body>
        <!-- 综合练习 -->
        <h4>青春不常在,抓紧谈恋爱</h4>
        <form action="xxx.php" method="post" name="regster">
            <table width="600px">
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="sex" id="male">
                        <label for="male"><img src="images/man.jpg"> 男</label>
                        <input type="radio" name="sex" id="female">
                        <label for="female"><img src="images/women.jpg"> 女</label>
                    </td>
                </tr>
    
                <tr>
                    <td>生日</td>
                    <td>
                        <select>
                            <option selected="selected">--请选择年份--</option>
                            <option>1999</option>
                            <option>1998</option>
                            <option>1997</option>
                            <option>1996</option>
                            <option>1995</option>
                            <option>1994</option>
                            <option>1993</option>
                            <option>1992</option>
                            <option>1991</option>
                            <option>1990</option>
                        </select>
                        <select>
                            <option selected="selected">--请选择月份--</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                            <option>11</option>
                            <option>12</option>
                        </select>
                        <select>
                            <option selected="selected">--请选择日期--</option>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                            <option>11</option>
                            <option>12</option>
                            <option>...</option>
                        </select>
    
                    </td>
                </tr>
    
                <tr>
                    <td>所在地区</td>
                    <td>
                        <input type="text" value="北京">
                    </td>
                </tr>
    
                <tr>
                    <td>婚姻状况</td>
                    <td>
                        <input type="radio" name="marry" id="married">
                        <label for="married">已婚</label>
                        <input type="radio" name="marry" id="unmarried" checked="checkeds">
                        <label for="unmarried">未婚</label>
                        <input type="radio" name="marry" id="breakoff">
                        <label for="breakoff">离婚</label>
                    </td>
                </tr>
    
                <tr>
                    <td>学历</td>
                    <td>
                        <input type="text" value="本科">
                    </td>
                </tr>
    
                <tr>
                    <td>喜欢的类型</td>
                    <td>
                        <input type="checkbox" name="like" id="yuanqi">
                        <label for="yuanqi">元气</label>
                        <input type="checkbox" name="like" id="chengshu">
                        <label for="chengshu">成熟</label>
                        <input type="checkbox" name="like" id="aojiao">
                        <label for="aojiao">傲娇</label>
                        <input type="checkbox" name="like" id="neixiang">
                        <label for="neixiang">内向</label>
                        <input type="checkbox" name="like" id="anjing">
                        <label for="anjing">安静</label>
                        <input type="checkbox" name="like" id="all" checked="checked">
                        <label for="all">我都喜欢</label>
                    </td>
                </tr>
    
                <tr>
                    <td>自我介绍</td>
                    <td>
                        <textarea>自我介绍</textarea>
                    </td>
                </tr>
    
                <tr>
                    <td></td>
                    <td>
                        <input type="submit" value="免费注册">
                    </td>
                </tr>
    
                <tr>
                    <td></td>
                    <td>
                        <input type="checkbox" checked="checked" id="list">
                        <label for="list">我同意注册条款和加入会员标准</label>
                    </td>
                </tr>
    
                <tr>
                    <td></td>
                    <td>
                        <a href="#">我是会员,立即登录</a>
                    </td>
                </tr>
    
                <tr>
                    <td></td>
                    <td>
                        <h4>我承诺</h4>
                        <ul>
                            <li>年满18,单身</li>
                            <li>抱着严肃的态度</li>
                            <li>真诚寻找另一半</li>
                        </ul>
                    </td>
                </tr>
            </table>
        </form>
    
    </body>
    </html>
    
    image.png

    这里其实是将所有表单元素放到了表格当中,然后隐藏了表格边框,做出一种类似网页排版的效果(实际开发中并不会这样做,因为表格并不适合用作排版,而更擅长用来展示数据)
    在表格标签的外层包括了表单域form标签,点击submit按钮,依旧能够提交数据,这说明form提交数据的方式跟其内部结构并没有太大联系
    总结来说就是所有关于表单的内容一定要写在form标签里面,包括submit按钮,实际开发中如果需要用户填写多个表单,用多个form标签来划分区域并区分name属性是最合适的(当然这种情况实际上并不多见)

    相关文章

      网友评论

          本文标题:表单

          本文链接:https://www.haomeiwen.com/subject/lddxzltx.html