表单中包含不一样的样式，不同功能的提交数据的方式。在许多页面中，浏览者不经意间已经不断在使用表单的功能，如留言，设置自己的密码或者是复选框，下拉列表等。

input对象下的多种表单表现形式：
通常在页面中见到的大部分表单的形式都是通过输入标记input来实现的，一个简单的样式表看上去可以是这样的。
<input name=""type="" value="" size="" maxlength="">

name:
表述输入数据的名字，其作用也是，其作用也是为了让程序明白所提交的数据。如之前那个例子中的<input type="text" name="length">输入的数据被命名为length
它的上面还有一句：var length = document.loandata.length.value;
前面一个length是程序定义的标识符，后面的一个length则是表示获取通过input提交的length的数值。（如果没有name属性，虽然在浏览器中显示的没有什么不同，但事实上后台程序或者JavaScript程序就不能获得提交的数据。）

type:
表示所定义的是哪种类型的表单形式，这个属性有9个可选值，

还有reset，一个和submit相反的属性

size:
表示文本框字段的长度

maxlength：
表示可以输入的最长的字符数量

value:
表示预先设置好的信息

1.text文本框的样式表单：
Text样式下的文本框是一个单行的文本框，比较常见于登陆操作

<html>

    <head>

        <style type="text/css">

            div{

                width:400px;

                font:180% 微软雅黑;

                margin:auto;

                padding:10px;

                text-align:right;

            }

            input{

                font:50% 微软雅黑;

            }

        </style>

    </head>

    <body>

        <div>

            <form action="..." method="post">

                输入用户名：<input name="name" type="text" size="20" maxlength="12">

                <br>输入邮箱地址：<input name="address" type="text" size="20" maxlength="20">

            </form>

        </div>

    </body>

</html>

2.password输入密码样式表单：

就是用于密码的设置

<body>

        <div>

            <form action="..." method="post">

                输入用户名：<input name="name" type="text" size="20" maxlength="12">

                <br>输入邮箱地址：<input name="address" type="text" size="20" maxlength="20">

                <br>输入密码：<input name="secret" type="password" size="20" maxlength="20">

            </form>

        </div></body>

3.checkbox复选框的样式表单：
这是个复选框的创建方式，类似于一个开关的on和off选择。浏览器会在选择栏前面提供一个方形小框。如果选择符合的选项，小框中会添加小沟符号表示被选中

<body>

        <div id="leftblock">注册信息</div>

        <div id="rightblock">

            <form action="..." methon="post">

                <input name="truename" type="checkbox" checked="checked">使用真实姓名

                <h1>实名制可以方便您更好和朋友交流</h1>

                                        <!--checked="checked"使复选框默认为选中状态-->

                <input name="address" type="checkbox" checked="checked">显示我的地址

                <h1>如果取消选中，其他用户将无法查到你的地址</h1>

                <input name="mail" type="checkbox" checked="checked">

                可以给我发邮件

                <h1>如果选中，我们将会为你发送来自广告商的信息</h1>

            </form>

        </div>

</body>

（checked="checked"表示复选框默认值设置为checked，那么小沟符号会被默认添加。）

4.radio单选按钮的样式表单：
更改一下上面的代码：

<body>

        <div id="leftblock">注册信息</div>

        <div id="rightblock">

            <form action="..." methon="post">

                <input name="onechoice" type="radio" value="one">使用真实姓名

                <h1>实名制可以方便您更好和朋友交流</h1>

                                        <!--checked="checked"使复选框默认为选中状态-->

                <input name="onechoice" type="radio" checked="checked" value="two">显示我的地址

                <h1>如果取消选中，其他用户将无法查到你的地址</h1>

                <input name="onechoice" type="radio" value="three">

                可以给我发邮件

                <h1>如果选中，我们将会为你发送来自广告商的信息</h1>

            </form>

        </div>

</body>

Radio样式的表单是一个多选一的表单功能，同样这里也可以用check="checked"来确定预先选择的一项。当选择唯一的目标之后，这个选项将会以数据的形式被发送。所以，这里必须给input对象设定value值，而且不同对象的value值不能相同。

5.submit提交数据的样式表：
用submit属性创建一个按钮，这个按钮的作用就是提交数据。准确的说，submit属性负责提交这个动作。当单击执行提交操作的按钮时，数据会发送到表单指定的地方。
如果把上面那个radio单选表单改一下：

<body>

        <div id="leftblock">注册</div>

        <div id="rightblock">

            <form action="..." methon="post">

                <input name="onechoice" type="radio" value="one">使用邮箱注册

                <h1>您可以通过自己习惯的邮箱来作为账号登录网站</h1>

                                        <!--checked="checked"使复选框默认为选中状态-->

                <input name="onechoice" type="radio" checked="checked" value="two">通过手机注册

                <h1>您可以通过手机免费获得我们的账号</h1>

                <input name="onechoice" type="radio" value="three">

                申请我的ID号

                <h1>您可以通过网站直接申请账号</h1>

                <br>

                <input type="submit" value=" 确 定 ">

            </form>

        </div>

</body>

这个确定按钮就是submit属性提交表单数据的按钮。 通过value属性，设计者可以修改按钮上显示的内容。
此外，类似submit属性的还有一个reset属性，这是一个复位按钮。当被单击时，表单的内容会被重新设置，回到页面的初始状态。其代码写起来和submit样式类似：
<input type="reset" value=" 恢 复 ">
（创建submit按钮或者reset按钮时，name属性不是必须的）

通过表单展示不一样的页面（input对象）的更多相关文章

  1. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  2. Python Django CMDB项目实战之-3创建form表单，并在前端页面上展示

    基于之前的项目代码 Python Django CMDB项目实战之-1如何开启一个Django-并设置base页.index页.文章页面 Python Django CMDB项目实战之-2创建APP. ...

  3. CBQW ---分组表单展示

    工作流审核表单后,将表单信息展示页面中. Rest读取展示 展示方式有2 一．              CBQW内容查询, 通过CBQW内容查询.分别通过设置itemstyle和header xsl ...

  4. 一般处理程序上传文件（html表单上传、aspx页面上传）

    html 表单上传文件        一般处理程序由于没有 apsx 页面的整个模型和控件的创建周期,而比较有效率.这里写一个用 html 表单进行文件上传的示例.        1. 表单元素选用 ...

  5. React实例----一个表单验证比较复杂的页面

    前言:这阵子看了两本CSS的书~对于CSS层叠,定位,继承等机制基本上都了解了,就想着自己写几个页面~正好自己就写了写CSS样式,然后用React渲染出来~ 闲话不多说,简单说一说这个页面,希望能对大 ...

  6. jquery模拟form表单提交并新打开页面

    /** * form表单提交本页面打开 * @param url * @param params */ function postCurrent(url,params){ var form = $(& ...

  7. js阻止表单默认提交、刷新页面

    一.阻止刷新页面 在表单中的提交按钮<button></button>标签改为<input type="button">或者在<butto ...

  8. 直接提交一个form表单后台返回一个新页面通过target属性可以放到iframe当中

    问题描述: 我想提交一个form表单后台直接返回一个新页面,但是当前页面还不想被替换掉: 解决方案: 在页面中添加一个iframe将form表单的target属性设置为iframe的id这样的话返回的 ...

  9. from表单文件上传后页面跳转解决办法

    from表单上传文件,路径跳转后,又不能转发回来. 本人的一个解决办法是.返回一段html代码,浏览器解析后后退一步,回到原来的页面并刷新. return "<html>< ...

随机推荐

  1. java的gradle项目的基本配置

    plugins { id 'org.springframework.boot' version '2.1.4.RELEASE' id 'java' } apply plugin: 'io.spring ...

  2. Spring中的事务管理（学习笔记）

    什么是事物? 事物是指逻辑上的一组操作,这组操作要么全部成功,要么全部失败. 事物的特性: 原子性.一致性.隔离性.持久性 Spring事务管理的高级接口: PlatformTransactionMa ...

  3. lc.exe 已退出 代码为 -1

    地址:http://jingyan.baidu.com/article/91f5db1bd0ace31c7f05e321.html

  4. 数字和为sum的方法数（动态规划）

    题目描述 给定一个有n个正整数的数组A和一个整数sum,求选择数组A中部分数字和为sum的方案数.当两种选取方案有一个数字的下标不一样,我们就认为是不同的组成方案. 输入描述: 输入为两行: 第一行为 ...

  5. uCos临界区保护

    定义有三种method,stm32f4采用的是第三种:将当前中断的状态标志保存在一个局部变量cpu_sr中,然后再关闭中断.cpu_sr是一个局部变量,存在于所有需要关中断的函数中.注意到,在使用了该 ...

  6. hihocoder #1039 : 字符消除 ( 字符串处理类 ) 好久之前做的题目，具体的算法代码中阅读吧

    #1039 : 字符消除 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi最近在玩一个字符消除游戏.给定一个只包含大写字母"ABC"的字符串s,消 ...

  7. HUST1017 Exact cover —— Dancing Links 精确覆盖 模板题

    题目链接:https://vjudge.net/problem/HUST-1017 1017 - Exact cover 时间限制:15秒 内存限制:128兆 自定评测 7673 次提交 3898 次 ...

  8. Adobe 官方公布的 RTMP 规范

    原文:  http://blog.csdn.net/defonds/article/details/17534903 RTMP 规范中文版 PDF 下载地址 译序:本文是为截至发稿时止最新 Adobe ...

  9. Java 远程调用之Hessian简例

    1. [代码]1.服务接口(Hello.java) package server; public interface Hello { String hello(String name);}2. [代码 ...

  10. VC++静态连接库

    目录 第1章静态连接库    1 1.1 同名函数的选择    1 1.2 模块合并    2 1.2.1 模块替换    4 1.3 内联函数    4 第1章静态连接库 静态连接库与动态连接库一样 ...