zoukankan      html  css  js  c++  java
  • HTML的表单

    表单:提交数据


        一.表单的基本语法:

                            <!--
                                method:指定表单提交的方式
                                post:表单提交时会在页面地址栏中显示提交地址
                                get:表单提交时会在页面地址栏中显示提交地址和表单提交信息
                                action:代表表单提交的地址
                            -->
                            <form method="post/get" action="表单提交的地址">
                                

                            </form>


        二.表单元素格式
                            type    指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button,默认为 text
                            name    指定表单元素的名称
                            value    元素的初始值。type 为 radio时必须指定一个值
                            size    指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
                            maxlength    type为text 或 password 时,输入的最大字符数
                            checked    type为radio或checkbox时,指定按钮是否是被选中


                    1.text:文本框
                                <input type="text" name="username" value="admin" size="30" maxlength="15" />

                                注意:
                                    1.当type取值为text时为文本框,name属性是必须的,其他几个属性并不是必须的,其他几个属性将根据表单需要而设置


                    2.password:密码框
                                <input type="password" name="userpwd" value="" size="30" maxlength="15">

                                注意:
                                    1.当type取值为password时为密码框,name属性是必须的,其他属性并不是必须的,实际开发中通常不设置value初始值。



                    3.radio:单选按钮
                                注意:name值相同时只能选中一个单选按钮
                                <!--checked:默认选中-->
                                <input type="radio" name="sex" value="男" checked/>男
                                <input type="radio" name="sex" value="女" />女

                                注意:
                                    1.当type取值为radio时为单选按钮,name和value属性是必须的,其他属性并不是必须的。
                                    2.同一组单选按钮,name属性值必须相同,才能在选中单选按钮时达到互斥
                                    3.同一组单选按钮只能有一个默认的checked属性


                    4:checkbox:复选框:都能选中
                                <input type="checkbox" name="interest" value="playgames" checked/>玩游戏
                                <input type="checkbox" name="interest" value="swimeing"/>游泳
                                <input type="checkbox" name="interest" value="ball"/>玩球

                                注意:
                                    1.当type取值为checkbox时为复选框,name和value属性是必须的,其他属性并不是必须的
                                    2.同一组复选框,根据需要可设置name属性值相同,也可不同
                                    3.同一组复选框中允许有多个复选框有默认的checked属性

                    5::select   -- option:下拉列表

                                <select name="city" size="3">
                                    <option value="shanghai">上海</option>
                                    <option value="beijing">北京</option>

                                </select>

                            注意:

                            1.一个<select>中至少包含一下<option>。
                            2.name和value属性是必须的,其他属性并不是必须的。
                            3.一个列表框中只能有一个列表项默认被选中。

                    6.按钮:
                            button:普通按钮
                                        <input type="button" name="btn" value="普通按钮"/>
                            reset:重置按钮:初始化表单信息
                                        <input type="reset" name="reset" value="重置按钮"/>
                            submit:提交表单中输入的信息
                                        <input type="submit" name="submit" value="提交按钮"/>
                            image:图像按钮:跟submit作用相同
                                        <input type="image" src="../images/login.gif"/>
                    7.文件域:
                            <form method="post" action="" enctype="multipart/form-data">
                                <input type="file" name="filename"/>
                                <input type="submit" name="submit" value="提交表单信息" />
                            </form>

                            注意:在表单中使用文件域时,必须设置表单的“enctype”编码属性为“multipart/form-data”,表示将表单数据分为多部分提交

                    8.邮箱:提交时验证邮箱格式是否正确
                            <input type="email" name="email"/>

                    9.网址:提交时验证网址格式是否正确
                            <input type="url" name="url"/>

                    10.数字:提交时必须符合大于等于最小值小于等于最大值,且每次增长step的值
                            <input type="number" min="1" max="10" step="2"/>

                    11.滑块:提交时必须符合大于等于最小值小于等于最大值,且每次增长step的值
                            <input type="range" name="range" min="0" max="100" step="2"/>


                    12.搜索框
                              搜索框:<input type="search" name="search"/>
                    13.隐藏域
                            
                            隐藏域:<input type="hidden" name="hidden" value="123"/>

                    14.只读
                            只读:<input type="text" name="name" value="张三" readonly/>

                    15.禁用
                            禁用:<input type="submit" name="submits" value="提交" disabled/>

                    16.表单元素的标注
                            for的值跟定位文本框id的值保持一致
                            <label for="textfor">标注</label>
                            <input type="text" name="textfors" id="textfor" value="呵呵"/>
                    17.表单验证:
                                1.为了减轻服务器的压力
                                2.保证数据的可行性和安全性

                            17.1.placeholder:
                                            input类型的文本框提供一种提示(hint)
                                            可以描述文本框期待用户输入何种内容
                                            提示语默认显示,当文本框中输入内容时提示语消失
                                            适合于input标签:text、search、url、email和password等类型
                                            <input type="text" placeholder="请输入用户名" name="username" value="" size="20" maxlength="16" required/><br/>
                            17.2.required:
                                            规定文本框填写内容不能为空,否则不允许用户提交表单
                                            适合于input标签:text、search、url、email、password、number、checkbox、radio、file等类型
                                            <input type="text" placeholder="请输入用户名" name="username" value="" size="20" maxlength="16" required/><br/>
                            17.3.pattern
                                            用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表单
                                            <input type="text" name="phone" required pattern="^1[358]d{9}"/>

  • 相关阅读:
    LibreOJ 6282 数列分块入门 6(在线插入在线查询)
    LibreOJ 6281 数列分块入门 5(分块区间开方区间求和)
    LibreOJ 6280 数列分块入门 4(分块区间加区间求和)
    LibreOJ 6279 数列分块入门 3(分块+排序)
    LibreOJ 6278 数列分块入门 2(分块)
    LibreOJ 6277 数列分块入门 1(分块)
    BZOJ 2301 Problem b(莫比乌斯反演+分块优化)
    MD5Untils加密工具类
    20160418javaweb之 Filter过滤器
    20160417javaweb之servlet监听器
  • 原文地址:https://www.cnblogs.com/ws1149939228/p/9167383.html
Copyright © 2011-2022 走看看