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}"/>

  • 相关阅读:
    Codeforces 451A Game With Sticks
    POJ 3624 Charm Bracelet
    POJ 2127 Greatest Common Increasing Subsequence
    POJ 1458 Common Subsequence
    HDU 1087 Super Jumping! Jumping! Jumping!
    HDU 1698
    HDU 1754
    POJ 1724
    POJ 1201
    CSUOJ 1256
  • 原文地址:https://www.cnblogs.com/ws1149939228/p/9167383.html
Copyright © 2011-2022 走看看