表单_表单验证 - CSDN
表单 订阅
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。 展开全文
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
信息
对    象
文本框,密码框等
控件分类
Button Objx,Input Pro等
作    用
采集数据
中文名
表单
组    成
表单标签、表单域、表单按钮
外文名
Form
表单代码
功能:用于申明表单,定义采集数据的范围,也就是
里面包含的数据将被提交到服务器或者电子邮件里。语法:
. . .
属性解释见下表:action=url用来指定处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.method=get或post指明提交表单的HTTP方法.可能的值为: post:POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get:不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.enctype=cdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式.这个特性的缺省值是"application/x-www-form-urlencoded"TARGET="..."指定提交的结果文档显示的位置: _blank :在一个新的、无名浏览器窗口调入指定的文档; _self :在指向这个目标的元素的相同的框架中调入文档; _parent :把文档调入当前框的直接的父FRAMESET框中;这个值在当前框没有父框时等价于_self; _top :把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架);这个值等价于当前框没有你框时的_self.例如:表示表单将向以post的方式提交,提交的结果在新的页面显示,数据提交的媒体方式是默认的application/x-www-form-urlencoded方式;表单域表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等,用于采集用户的输入或选择的数据,下面分别讲述这些表单域的代码格式:文本框是一种让访问者自己输入内容的表单对象,通常被用来填写单个字或者简短的回答,如姓名、地址等。代码格式:属性解释:type="text"定义单行文本输入框;name属性定义文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;size属性定义文本框的宽度,单位是单个字符宽度;maxlength属性定义最多输入的字符数。value属性定义文本框的初始值样例1:样例1代码:也是一种让访问者自己输入内容的表单对象,只不过能让访问者填写较长的内容。代码格式:属性解释:name属性定义多行文本框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;cols属性定义多行文本框的宽度,单位是单个字符宽度;rows属性定义多行文本框的高度,单位是单个字符宽度;wrap属性定义输入内容大于文本域时显示的方式,可选值如下:默认值是文本自动换行;当输入内容超过文本域的右边界时会自动转到下一行,而数据在被提交处理时自动换行的地方不会有换行符出现; Off,用来避免文本换行,当输入的内容超过文本域右边界时,文本将向左滚动,必须用Return才能将插入点移到下一行; Virtual,允许文本自动换行。 Physical,让文本换行,当数据被提交处理时换行符也将被一起提交处理。样例2:样例2代码:是一种特殊的文本域,用于输入密码。当访问者输入文字时,文字会被星号或其它符号代替,而输入的文字会被隐藏。代码格式:属性解释:type="password"定义密码框;name属性定义密码框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;size属性定义密码框的宽度,单位是单个字符宽度;maxlength属性定义最多输入的字符数。样例3:样例3代码:隐藏域是用来收集或发送信息的不可见元素,对于网页的访问者来说,隐藏域是看不见的。当表单被提交时,隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。代码格式:属性解释:type="hidden"定义隐藏域;name属性定义隐藏域的名称,要保证数据的准确采集,必须定义一个独一无二的名称;value属性定义隐藏域的值例如:复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素,都必须有一个唯一的名称。代码格式:属性解释:type="checkbox"定义复选框;name属性定义复选框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;value属性定义复选框的值样例4:样例4代码:xxxcom当需要访问者在单选项中选择唯一的答案时,就需要用到单选框了。代码格式:属性解释:type="radio"定义单选框;name属性定义单选框的名称,要保证数据的准确采集,单选框都是以组为单位使用的,在同一组中的单选项都必须用同一个名称;value属性定义单选框的值,在同一组中,它们的域值必须是不同的。样例5:样例5代码:有时候,需要用户上传自己的文件,文件上传框看上去和其它文本域差不多,只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。注意:在使用文件域以前,请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE="multipart/form-data"来确保文件被正确编码;另外,表单的传送方式必须设置成POST。代码格式:属性解释:type="file"定义文件上传框;name属性定义文件上传框的名称,要保证数据的准确采集,必须定义一个独一无二的名称;size属性定义文件上传框的宽度,单位是单个字符宽度;maxlength属性定义最多输入的字符数。样例6:样例6代码:下拉选择框允许你在一个有限的空间设置多种选项。代码格式:属性解释:size属性定义下拉选择框的行数;name属性定义下拉选择框的名称;multiple属性表示可以多选,如果不设置本属性,那么只能单选;value属性定义选择项的值;selected属性表示默认已经选择本选项。样例7:样例7代码:样例8:按Ctrl可以多选样例8代码:表单按钮控制表单的运作。1.3.1 提交按钮提交按钮用来将输入的信息提交到服务器。代码格式:属性解释:type="submit"定义提交按钮;name属性定义提交按钮的名称;value属性定义按钮的显示文字;样例9:样例9代码:1.3.2 复位按钮复位按钮用来重置表单。代码格式:属性解释:type="reset"定义复位按钮;name属性定义复位按钮的名称;value属性定义按钮的显示文字;样例10:样例10代码:1.3.3 一般按钮一般按钮用来控制其他定义了处理脚本的处理工作。代码格式:属性解释:type="button"定义一般按钮;name属性定义一般按钮的名称;value属性定义按钮的显示文字;onClick属性,也可以是其它的事件,通过指定脚本函数来定义按钮的行为;样例11:样例11代码:二.表单表单是用来提交资料、意见,规范流程执行过程的格式。
收起全文
精华内容
参与话题
  • html表单

    千次阅读 多人点赞 2019-10-08 16:40:59
    1.1 表单标签作用: 作用:将客户端的数据提交给服务器,(表单是客户与服务器交互的一种方式)。 可见性:在网页上是不可见的。 1.2 form常用的属性: form标签是表单标签的一个根标签。 常用属性 作用...

    1.1 表单标签作用

    1. 作用:将客户端的数据提交给服务器,(表单是客户与服务器交互的一种方式)。
    2. 可见性:在网页上是不可见的。

    1.2 form常用的属性

     form标签是表单标签的一个根标签

    常用属性 作用
    action 提交给服务器的地址
     method 提交数据给服务器的方式,主要有两种方式:GET(默认)或POST

    1.3 GET与POST在格式上的区别

    提交方法 特点
    GET

    默认是GET方式,参数跟在地址栏后面,以?隔开。多个参数之间以&符号分隔,安全性低

    POST 参数在地址栏是不可见的,安全性更高。
    GET 提交的数据有大小限制,不能超过1kb。
    POST 提交的数据是没有大小限制的。
    • 注意:GET提交的数据有大小限制,原则上不能超过1kb。但是实际上,某些浏览器厂商并未遵守这个规范,有些超过了1kb,不同的厂商各有不同。

     1.4 案例:表单标签的应用

     1.4.1 案例需求

    结合表格布局,制作如图所示的注册页面。

    1.4.2 案例效果

     1.4.3 案例分析

    1. 整个表单由8行2列组成,第1行显示文本,可以在td中使用label标签。
    2. 用户名、密码、性别、爱好、照片使用input标签,设置不同的type属性。
    3. 学历使用select,个人简介使用textarea
    4. 最后1行跨2列,注册、清空、按钮的type分别是submit、reset、button

     

    • 表单的根标签是一个:form标签
    • form表单常用的属性:
    1. action:指定表单提交的服务器地址。
    2. method:指定表单的提交方式get/post,默认是get方式。 
    • 注意事项
    1. 任何一个表单项如果没有name的属性值都不允许提交。
    2. 如果一个表单项可以输入数据,那么可以没有value属性值,如果不能输入数据,那么一定要存在value属性值,提交的时候是提交了value属性值
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>用户注册案例</title>
        <style type="text/css"></style>
        <script type="text/javascript"></script>
    </head>
    <body>
    <form action="http://www.baidu.com" method="get">
        <table width="400px" height="400px">
            <tr>
                <!--colspan:单元格跨几列-->
                <td colspan="2">
                    <h4>用户注册</h4>
                    <hr/>
                </td>
            </tr>
    
    
            <!--隐藏表单项,应用场景:某些数据对用户而言是没有意义的,用户不需要看到这些数据,但是服务器又需要,那么这-->
            <!--时候就可以使用隐藏表单项-->
            <input type="hidden" name="flag" value="true"/>
    
            <tr>
                <td>用户名:</td>
                <td>
                    <!--用户名:普通文本输入框-->
                    <input type="text" name="useName" value="请输入用户名..."/>
                </td>
            </tr>
    
            <tr>
                <td>密码:</td>
                <td>
                    <!--密码:密码框-->
                    <input type="password" name="password"/>
                </td>
            </tr>
    
            <tr>
                <td>性别:</td>
                <td>
                    <!--性别:单选框,单选框input标签,type=radio 同一组的单选框只能选择其中一个
                      单选框如果需要分组,那么必须保持name的属性值一致。如果需要默认选中某一个,那么需要添加
                      checked属性-->
                    男:<input type="radio" name="sex" value="man" checked/>
                    女:<input type="radio" name="sex" value="woman"/>
                </td>
            </tr>
    
            <tr>
                <td>爱好:</td>
                <td>
                    <!--兴趣爱好:复选框-->
                    游泳:<input type="checkbox" name="hobbit" value="swimm"/>
                    上网:<input type="checkbox" name="hobbit" value="surf"/>
                    电影:<input type="checkbox" name="hobbit" value="movie"/>
                    看书:<input type="checkbox" name="hobbit" value="read"/>
                </td>
            </tr>
    
            <tr>
                <td>学历:</td>
                <td>
                    <!--学历:下拉框,下拉框使用的是select标签-->
                    <select name="education">
                        <option value="bs">博士</option>
                        <option value="ss">硕士</option>
                        <option value="bk">本科</option>
                        <option value="dz">大专</option>
                    </select>
                </td>
            </tr>
    
            <tr>
                <td>照片:</td>
                <td>
                    <!--照片:文件表单项-->
                    <input type="file" name="image"/>
                </td>
            </tr>
    
            <tr>
                <td>个人简介:</td>
                <td>
                    <!--个人简介:文本域 标签:textarea-->
                    <textarea  cols="40" rows="10" name="intr"></textarea>
                </td>
            </tr>
    
            <tr align="center">
                <!--colspan:单元格跨几列-->
                <td colspan="2">
                    <!--普通按钮-->
                    <input type="button" value="普通按钮"/>
                    <!--重置表单项-->
                    <input type="reset" value="重置"/>
                    <!--提交按钮:提交表单的数据到服务器上-->
                    <input type="submit" value="注册"/>
                </td>
            </tr>
    
        </table>
    </form>
    </body>
    </html>

     

     1.5 常用的表单控件

    表单项 控件代码 属性 备注
    文本框

    <input type="text" name="名字">

    type:控件的类型

    name:名字,给服务器使用

    value:默认值

    readonly:文本框只读

    disabled:文本框不可用,数据不能提交给服务器

    placeholder:文本框输入前提示文字

    如果没有指定type类型,默认是text

    密码框

    <input type="password">

    属性同上 输入的字符不可见
    单选框

    <input type="radio" name="gender" value="男" checked="checked"> 

    checked:默认选中

    value:指定选中这一项的值,如果没有指定,默认是on

    同一组的单选框只能选择其中一个,单选框如果需要分组,那么必须保持name的属性值一致。如果需要默认选中某一个,那么需要添加checked属性
    复选框

    <input type="checkbox" name="hobby" value="游泳">

    checked:选中

    value:选中这一项的值

    下拉列表

    <select> 容器

    默认是单选

    多选

     

    name:给服务器使用的名字

    multiple:多选

    size:指定多选的时候大小

     
    <option>代表其中一项

    value:选中这一项的值

    selected:默认选中

     
    隐藏表单 <input type="hidden" name="id"  value="值">

    name:给服务器使用的名字

    value:隐藏域的值

    表单上不可见,可以将数据提交给服务器,一般用于一些不需要用户看到的数据。
    文本域

    <input type="file" name="photo" accept="image/*">

    accept:指定文件类型

    如:image/*

     
    多行文本域

    <textarea name="intro" cols="50" rows="5"></textarea>

    rows:指定显示的行数

    cols:指定显示的列数

    注:没有value值,主体部分就是它的值。
    提交按钮

    <input type="submit" value="注册"/>

    <button>按钮文字</button>

    value:按钮上出现的文字

    button:标签是一个专门按钮

    也可以指定type类型,默认是提交按钮

    将整个表单提交给服务器
    重置按钮

    <input type="reset" value="重置"/>

      还原到开始状态
    普通按钮

    <input type="button" value="按钮"/>

      在表单中没有具体的功能,主要用于后期程序开发
    图片按钮

    <input type="image" src="img/regbtn.jpg">

    x,y:点击在图片上的坐标 具有与submit相同的功能

    1.6 html5新添加type属性

    描述
    color 定义拾色器
    date 定义日期字段(带有calendar控件)
    datetime-local 定义日期字段(带有calendar和time控件)
    month 定义日期字段的月(带有calendar控件)
    week 定义日期字段的周(带有calendar控件)
    time 定义日期字段的时分秒(带有time控件)
    email 定义用于e-mail地址的文本字段,如果输入不正确的邮箱地址有验证的功能
    number 定义带有spinner控件的数字字段
    range 定义带有slider控件的数字字段
    search 定义用于搜索的文本字段,**当输入内容的时候,搜索框后边会自动出现一个小X,点击这个小X,可以清除输入的内容。**
     tel 定义用于电话的文本字段,在手机上操作会出现输入数字的键盘。
    URL 定义用于URL的文本字段,在手机上操作会出现输入网址的键盘。
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css"></style>
        <script type="text/javascript"></script>
    </head>
    <body>
    <form action="http://www.baidu.com">
        你喜欢的颜色:<input type="color" name="color"/><br/>
        生日:<input type="date" name="birthday"/><br/>
        邮箱:<input type="email" name="email"/><br/>
        手机:<input type="tel" name="tel"/><br/>
        <input type="submit" value="注册"/>
    </form>
    </body>
    </html>

    更多资料,搜索或扫码关注公众号:数说Cloud

     

    展开全文
  • HTML-表单(非常详细)

    万次阅读 多人点赞 2018-08-31 10:41:24
    表单语法 &lt;form method="post"(规定如何发送表单数据 常用值:get|post) action="result.html"&gt;(表示向何处发送表单数据) &lt;p&gt; 名字:&lt;input name=&...

     

    表单语法

    <form  method="post"(规定如何发送表单数据      常用值:get|post)
     action="result.html">(表示向何处发送表单数据)
       <p>  名字:<input name="name" type="text" >  </p>
       <p>  密码:<input name="pass" type="password" >  </p>
       <p>
          <input type="submit" name="Button" value="提交"/>
          <input type="reset" name="Reset" value="重填“/> 
       </p>
    </form>
    

    经验:在实际网页开发中通常采用post方式提交表单数据

     

    表单元素格式

    语法:

    <input  type="text"(input元素类型)name="fname"(input元素名称) 
    value="text"(input元素的值)/>
    

    属性

    说明

    type

    指定元素的类型textpasswordcheckboxradiosubmitresetfilehiddenimage button默认为 text

    name

    指定表单元素的名称

    value

    元素的初始值type radio必须指定一个值

    size

    指定表单元素的初始宽度 type text password,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位

    maxlength

    typetext password 时,输入的最大字符

    checked

    typeradiocheckbox时,指定按钮是否是被选中

     

    表单元素

    文本框-语法

    <input  type="text"(文本框)  name="userName"(文本框名称) value="用户名"(文本框初始值) size="30"(文本框长度) maxlength="20"(文本框可输入最多字符) />
    

    密码框-语法

    <input  type="password "(密码框)  name="pass"(密码框的名称)  size="20"(密码框的长度) />
    

    单选按钮-语法

    <input name="gen" type="radio"(单选按钮框) value="男"(值)  checked(单选按钮选中状态)  />男
    <input name="gen" type="radio" value="女" />女
    

    复选框-语法

    <input type="checkbox"(复选框) name="interest" value="sports"(值)/>运动
    <input type="checkbox" name="interest" value="talk" checked(复选框选中状态) />聊天
    <input type="checkbox" name="interest" value="play"/>玩游戏
    

    列表框-语法

    <select(列表框) name="列表名称" size="行数">
    <option value="选项的值" selected="selected"(默认选中项)>…</option >
    <option(选项) value="选项的值">…</option >
    </select>
    

    按钮-语法

    <input type="reset" (重置按钮) name="butReset"  value="reset按钮"(按钮上显示的文字)>
    <input type="submit"(提交按钮) name="butSubmit" value="submit按钮">
    <input type="button"(普通按钮) name="butButton" value="button按钮"/>
    
    
    图片按钮
    
    <input type="image" src="images/login.gif"/(图片路径)>

    多行文本域-语法

    <textarea(多行文本域)  name="showText"  cols="x"(显示的列数)  rows="y"(显示的行数)>文本内容 </textarea  >
    

    文件域-语法

    <form action="" method="post" enctype="multipart/form-data"(表单编码属性)>
      <p><input type="file"(文件域) name="files" />
      <input type="submit" name="upload" value="上传" /></p>
    </form>
    

    邮箱-语法

    <p>邮箱:<input type="email"(邮箱)  name="email"/></p>
    <input type="submit"/>
    

    注意:会自动验证Email地址格式是否正确

    网址-语法

    <p>请输入你的网址:<input type="url"(网址)  name="userUrl"/></p>
    <input type="submit"/>
    

    注意:会自动验证URL地址格式是否正确

    数字-语法

    <p>请输入数字:<input type="number"(数字)  name="num" min="0"(允许的最小值) max="100"(允许的最大值) step(合法的数字间隔)="10"/></p>
    <input type="submit"/>
    

    滑块-语法

    <p>请输入数字:<input type="range"(滑块)  name="range1" min="0"(允许的最小值) max="10"(允许的最大值) step(合法的数字间隔)="2"/></p>
    <input type="submit"/>
    

    搜索框-语法

    <p>请输入搜索的关键词:<input type="search"(搜索框)  name="sousuo"/></p>
    <input type="submit"/>
    

     

    表单的高级应用

    隐藏域-语法

    <input type="hidden"(隐藏域) value="666" name="userid">
    

    只读和禁用-语法

    <input name="name" type="text" value="张三"  readonly(只读文本框)>
    <input type="submit "  disabled (禁用)  value="保存" >
    

    表单元素的标注

    1.增强鼠标的可用性

    2.自动将焦点转移到与该标注相关的表单元素上

    语法

    <label for="id"(表单元素的id)>标注的文本</label>
    <input type="radio" name="gender" id="male"/(表单元素id)>
    

     

    表单的初级验证

    表单验证的好处

            1.减轻服务器的压力

            2.保证数据的可行性和安全性

    表单初级验证的方法

           1.placeholder                   2.required                       3.pattern

    placeholder

               1.input类型的文本框提供一种提示(hint

               2.可以描述文本框期待用户输入何种内容

               3.提示语默认显示当文本框中输入内容时提示语消失

               4.适合于input标签:textsearchurlemailpassword等类型

    语法:

    <input type="search" name="sousuo"  placeholder(文本框输入内容提示)="请输入要搜索的关键字"/>
    

     

    required

               1.规定文本框填写内容不能为空,否则不允许用户提交表单

               2.适合于input标签textsearchurlemailpasswordnumbercheckboxradiofile等类型

    语法:

    <input type="text" name="username"  required/(必填项)>
    

    pattern

             用户输入的内容必须符合正则表达式所指的规则,否则就不能提交表

    语法:

    <input type="text" name="tel"  required pattern(验证规则,正则表达式)="^1[358]\d{9}" />
    

         

     

    展开全文
  • HTML5 表单

    2019-10-10 11:14:45
    1、表单作用 收集用户的信息并提交给服务器 2、表单的要素 form元素:收集用户的信息 表单控件:可以与用户进行数据交互的可视化组件 form元素 &lt;form&gt;&lt;/form&gt; 属性: 属性 取值 ...

    HTML5 表单

    • 1、表单作用
      • 收集用户的信息并提交给服务器
    • 2、表单的要素
      • form元素:收集用户的信息
      • 表单控件:可以与用户进行数据交互的可视化组件

    form元素 <form></form>

    属性 取值 说明
    action 地址值 提交给服务器处理程序的地址,默认提交本页
    method
    get 向服务器要数据,显式提交,大小不超过2KB,默认值
    post 提交给服务器处理,隐式提交,无数据大小限制
    enctype
    application/x-www-form-unlencoded 允许所有的文本数据提交给服务器,默认值
    multipart/form-data 允许将文件提交给服务器
    text/plain 允许将普通字符提交给服务器,特殊字符不行

    表单控件

    • 只有放在<form>中才能提交服务器
    1、文本框 和 密码框
    • 文本框:<input type=‘text’>
    • 密码框:<input type=‘password’>
    属性 取值 说明
    name 字符串 为控件起名,在服务器上使用
    value
    字符串 控件上所显示的值
    maxlength
    数值 限制输入的最大字符数
    placeholder
    字符串 提示的占位符
    2、按钮
    • 1、提交按钮 <input type=‘submit’>
    • 2、重置按钮 <input type=‘reset’>
    • 3、普通按钮 <input type=‘button’>
    属性 说明
    value 字符串 设置按钮上的文字
    3、单选按钮 和 复选框
    • 1、单选按钮 <input type=‘radio’>
    • 2、复选框 <input type=‘checkbox’>
    属性 说明
    name 字符串 定义名称,并分组
    value 字符串 定义控件的值
    checked 设置预选中,该属性无值
    4、隐藏域 和 文件选择框
    • 1、隐藏域:提交给服务器但不显示给用户 <input type=‘hidden’>
    属性 说明
    name 字符串 定义名称
    value 字符串 定义控件的值
    • 2、文件选择框 <input type=‘file’ method=‘post’ enctype=‘multipart/form-data’>
    属性 说明
    name 字符串 定义名称
    • 注意:文本选择框的表单method值一定为post,且enctype值为multipart/form-data
    5、多行文本域
    • 多行文本域: <textarea> </textarea>
    属性 说明
    name 字符串 定义名称
    cols 数值 指定文本域的列数(文本框宽度)
    rows 数值 指定文本域的行数(文本框高度)
    6、下拉选项框
    • 1、下拉选项框:<select> </select>
    • 2、选项标记:<option> </option>
    标签 属性 说明
    <select> </select> name 字符串 定义名称
    <option> </option> value 字符串 提交服务器的内容
      <form action="login" method="post" enctype="multipart/form-data">
            <p>  <!-- 文本框 -->
                用户名称
                <input type="text" name="uname" maxlength="12" placeholder="请输入用户名">
            </p>
            <p>   <!-- 密码框 -->
                用户密码
                <input type="password" name="upwd" placeholder="请输入密码">
            </p>
            <p>  <!-- 按钮 -->
                <input type="submit">
                <input type="reset">
                <input type="button" value="返回">
            </p>
            <p>  <!-- 单选按钮 -->
            	性别:
                <input type="radio" name="sex" value="m"><input type="radio" name="sex" value="w"><input type="radio" name="sex" value="x" checked>保密
            </p>
            <p>  <!-- 复选框 -->
            	爱好:
                <input type="checkbox" name="hobby" checked>游泳
                <input type="checkbox" name="hobby">看书
                <input type="checkbox" name="hobby">旅游
            </p>
            <p>  <!-- 隐藏域 -->
                <input type="hidden" name="uid" value="123456789">
            </p>
            <p>  <!-- 文本选择框 -->
                上传头像:
                <input type="file" name="hphoto">
            </p>
            <p>  <!-- 多行文本域  -->
                <textarea name="info" cols="30" rows="10"></textarea>            
            </p>
            <p>  <!-- 下拉选项框  -->
                选择城市
                <select name="city" >
                    <option value="BJ">北京</option>
                    <option value="TJ">天津</option>
                    <option value="SH">上海</option>
                    <option value="CQ">重庆</option>
                </select>
            </p>
        </form>
    
    展开全文
  • html中form表单的使用方法和介绍

    万次阅读 多人点赞 2017-10-04 09:52:31
    form表单的使用方法 第1节、表单赏析 第2节、了解表单 功能:用于搜集不同类型的用户输入的内容   有了表单,网页的内容可以由用户自己创建,那么对于网页来说,我们既是网页创建都者,也是网页的消费者。 ...
    form表单的使用方法

    一、表单赏析



    二、了解表单

    功能:用于搜集不同类型的用户输入的内容

     

    有了表单,网页的内容可以由用户自己创建,那么对于网页来说,我们既是网页创建都者,也是网页的消费者。

    三、常用的表单元素

    ü  form   表单

    ü  input   表单元素,表单项

    ü  select和option  下拉菜单

    ü  textarea 文本域

     

    (1)form元素

    功能:用于创建一个表单

    格式:<form></form>

     

    基本用法:


    重要属性:

    1,action:表示当前表单中的内容提交给哪个页面进行处理

    2,method:表示当前表单提交的方式,常见的有get和post方式,默认是get提交

     

    (2)input元素

    表示输入框,有多种形式,可以根据type属性来确定显示哪种输入框。


    基本用法:


    效果 :


    注意细节:

    1,对于input来说,它的type的默认值是text,表示单行文本

    2,对于input,最好给它添加一个name属性,作用是用于将用户输入的内容提交给要处理这个数据的页面

     

    GET提交与POST提交:

     

    GET:


    如果以get方式进行提交,但没有写上name属性,那么用户输入的内容是提交不了的,但是也会出现?这个标志:


    POST:

    当用户以post方式提交时,用户输入的内容不会放到地址栏里面,比较安全:


    GET和POST小结:

    1,GET会将用户输入的内容放到地址栏里面,使用GET请求不安全

    2,POST不会将用户输入的内容放到地址栏里面,相对安全

     

    细节:

    1,每一个input标签都有一个value属性,不同类型的input, value的作用也不同

    对于type=”text”来说,value可有可无,因为用户输入的内容都可以提交过去。

    对于type=”radio”或type=”checkbox”来说,没有value,是提交不了的。


    2,对于type=”radio”来说,如果你只想选择一个,需要给每个input添加一个name属性,属性值也必须一致,如果不添加,就不能满足单选框的需求。

     

    3,关于单行文本的宽度,可以使用size属性来设置,表示字符长度,实际上不用,我们一般是通过CSS进行控制的。

     

    (3)select和option

    作用:用来实现下拉列表

     

     

    格式:<select>

    <option>内容</option>

    <option>内容</option>

    <option>内容</option>

    </select>

     

    基本用法:


    注意点:

    1,默认情况下,提交时,它将option里面的内容作为提交的内容,但是通常我们不这样做,我们通常给opton设置一个value属性,属性值我们通常用数字。


    使用value后的情况如下:


     

    我们可以使用selected属性让某个option处理默认选中状态。


     

    (3)textarea

    作用:提供输入大量文本的输入框,比如,QQ空间中发表状态,贴吧发表贴子等。

    格式:<textarea></textarea>

     

    基本用法:



    展开全文
  • from表单应用

    2019-04-08 09:06:47
    今天,我们来学习from表单的应用,首先,我们要知道from的两个属性action和method,前者表示规定表单提交时向何处发生表单数据,后者规定了表单提交的方式,简单的说就是前者是地址,后者是方式,而提交的方式有两种...
  • VUE--Form表单

    万次阅读 2019-04-18 16:56:04
    表单内容 1、写在data内验证: :代表这是一个表单 -> ref:表单被引用时的名称,标识 是我们绑定的对象 -> rules:是动态绑定的rules,表单验证规则 -> model:表单数据对象 是绑定我们form表单...
  • html-10 表单

    2020-10-25 17:19:07
    表单 用途:收集用户信息 组成:表单域,表单控件,提示信息 表单域 可以将表单元素信息提交给服务器(后台) <form action=地址 method=提交方式 name="name1"> 写表单元素之前,应该有个表单域把他们包含 ...
  • 表单

    2019-07-29 22:10:58
    在Bootstrap框架中实现这样的表单效果是轻而易举的,你只需要在<form>元素中添加类名“form-inline”即可。内联表单实现原理非常简单,欲将表单控件在一行显示,就需要将表单控件设置成内联块元素(display:...
  • 什么表单:组成: 一个表单有三个基本组成部分: 1) 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 2) 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框...
  • HTML 表单(form) 使用详解

    万次阅读 2015-05-31 09:48:36
    一、表单  1.表单的作用  HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。  2.表单的工作机制    3.表单定义(标签)  HTML...
  • form表单提交的几种方式

    万次阅读 多人点赞 2019-06-05 10:58:42
    表单提交方式一:直接利用form表单提交 html页面代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Insert title here</title> </head> &...
  • form表单验证是几乎所有web项目或者APP都会遇到的,那么通常遇到的表单验证情况主要分为以下三种: 1.form表单中的表单项项都是写死的 意思是说,表单项不是根据动态数据加载出来的。那么只需要写好对应的验证规则...
  • 表单form在整个页面居中

    万次阅读 2017-11-08 18:31:57
    应该在需要居中的div里面写上margin:0px auto;而不是align:center 因为其他浏览器是不支持的...这不符合W3C.. ...另外,form本来就只是一个表单而已,对页面根本就没有布局上的作用..需要的话利用div来套..
  • 表单大师,专注于对网站提供表单设计和数据的收集与管理服务,解决市场人员的用户资源管理问题,从录入商机用户到后期的跟踪管理、二次营销,表单大师用一流的技术团队实施全程护驾,帮助互联网创业者精准化管理用户...
  • 1、定义一个类,该类的字段要包含表单中所有input的name对应的值,并且在类中为对应的字段生成getter 与setter方法 2、在对应的controller函数中,添加该类的一个对象作为参数。 例子如下: 前台页面表单表单...
  • 如何清除form表单的数据

    万次阅读 2017-02-16 10:22:44
    在我们平水写前台页面的时候,总是避免不了的要和表单打交道,在完成表单的提交,关闭,以及关联主题的切换时,我们都会有清除表单之前数据的需求,清除表单数据的方法有很多,但要根据具体的情况来采用合适的方法才...
  • JEECG简单实例讲解自定义表单功能作者:任杰 http://blog.csdn.net/renjie0520/article/details/50286503一、自定义表单功能简介 自定义... 总体来讲,自定义表单功能概括起来如下: 1)表单预览,动态报表展示(列
  • 防止表单重复提交的几种方法总结

    万次阅读 2017-06-08 14:53:58
    1、JavaScript防止表单重复提交...主要是针对在网络延迟情况下用户有时间点击多次submit按钮导致表单重复提交,使用javascript控制Form表单只能提交一次。 Var isCommitted = false; //表单是否应提交标识,默认
  • 自定义表单的实现方法浅谈2008年05月29日 星期四 11:32自定义表单的用途比较广泛,在OA的自定义工作流程中、CMS功能扩展、自定义调查中都将涉及到。为什么要使用自定义表单呢?试想一下,如果某个系统中没有自定义...
  • 基于bootstrap拖拽布局完成的web表单设计器

    万次阅读 热门讨论 2018-07-24 09:13:13
    本人是一名java开发程序员,前段时间公司要制作一个bpm项目,项目中需要一个表单设计器,以达到设计动态表单的功能; 然后我在网上找了半天,免费开源的几乎都不适用,最后勉强找到一个bootstrap的布局样式设计器。...
1 2 3 4 5 ... 20
收藏数 787,912
精华内容 315,164
关键字:

表单