使用form创建的仅仅是一个空白的表单，
我们还需要向form中添加不同的表单项

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

            <form action="target.html">

                   <fieldset>

                     <legend>信息</legend>

                             <label for="um">用户</label>

                             <input id="um" type="text" name="username"  />

                            <br /><br />

                             <label for="pwd">密码</label>

                             <input id="pwd" type="password" name="password" />

                           <br /><br />

                      </fieldset>

                </form>

    </body>

</html>

单选按钮
- 使用input来创建一个单选按钮，它的type属性使用radio
- 单选按钮通过name属性进行分组，name属性相同是一组按钮
- 像这种需要用户选择但是不需要用户直接填写内容的表单项，
还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器

如果希望在单选按钮或者是多选框中指定默认选中的选项，
则可以在希望选中的项中添加checked="checked"属性

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

            <form action="target.html">

                   <fieldset>

                     <legend>用户爱好</legend>

         性别  <input type="radio" name="gender" value="male" id="male" />

               <label for="male">男</label>

                      <input type="radio" name="gender" value="female" checked="checked" id="female" />

                       <label for="female">女</label>

                <br /><br />

                      </fieldset>

                </form>

    </body>

</html>

多选框

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

            <form action="target.html">

            <fieldset>

    爱好     <input type="checkbox" name="hobby" value="zq" />足球

                <input type="checkbox" name="hobby" value="lq" />篮球

                <input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球

                <input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球

            <br /><br />

            </fieldset>

    </body>

</html>

            <button type="submit">提交</button>

            <button type="reset">重置</button>

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

html-from提交表单的更多相关文章

  1. jquery 通过submit()方法 提交表单示例

    jquery 通过submit()方法 提交表单示例: 本示例:以用户注册作为例子.使用jquery中的submit()方法实现表单提交. 注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测 ...

  2. 4 django系列之HTML通过form标签来同时提交表单内容与上传文件

    preface 我们知道提交表单有2种方式,一种直接通过submit页面刷新方法来提交,另一种通过ajax异步局部刷新的方法提交,上回我们说了通过ajax来提交文件到后台,现在说说通过submit来提 ...

  3. 总结：JSP几种提交表单方法

    问题描述: 最近进了一家“老公司”工作,说他老不是说他成立的早,是因为他的编程框架太l.......low了.EJB的规范模式,使用是IBM经过Eclipse二次开发出来的RAD(Rational A ...

  4. 【ajax 提交表单】多种方式的注意事项

    在业务中,可能因为表单内容过于庞大,字段过于繁杂,如果人为去拼接的话 ,需要耗费大量的时间和精力,与此同时,代码看上去也是冗余不堪. 所以,提交表单的时候如果能整个表单数据整体提交,那是非常开心的事情 ...

  5. POST方式提交表单时，后台接受实体如果继承了父类，将无法映射表单对应数据

    引言 刚才在做一个post提交表单时,我在表单里放了几个隐藏域用来存放数据,表单name属性和后台实体属性签名保持一致.只是后台Action参数包含继承关系,所以无法获取到表单对应的值.刚开始一直纳闷 ...

  6. button 按钮，结合onclick事件，验证和提交表单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Struts2 token禁止重复提交表单

    如果服务器响应慢的情况下,用户会重复提交多个表单,这时候有两种设计思想: 1.在客户端使用JS技术,禁止客户重复提交表单.但是这样会使一些不使用浏览器方式登陆的人比如使用底层通信来攻击你的服务器 2. ...

  8. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  9. Mvc 提交表单的4种方法全程详解

    一,MVC  HtmlHelper方法 Html.BeginForm(actionName,controllerName,method,htmlAttributes){} BeginRouteForm ...

  10. jQuery使用ajaxSubmit()提交表单示例

    ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示:   代码如下: <script src=" ...

随机推荐

  1. 进程、线程、协程、CPU

    进程.线程.CPU 进程是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.或者说进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进 ...

  2. 牛客多校第十场 B Coffee Chicken 递归

    题意: 给你一个“斐波那契”字符串数列,第n项由第n-1项和第n-2项拼接而成,输出某项的某位及其后10位. 题解: 递归求解即可. #include<bits/stdc++.h> usi ...

  3. hdu多校第八场 1010（hdu6666） Quailty and CCPC 排序/签到

    题意: CCPC前10%能得金牌,给定队伍解题数和罚时,问你有没有一个队伍如果向上取整就金了,四舍五入就银了. 题解: 排序后按题意求解即可. #include<iostream> #in ...

  4. fasttext源码剖析

    fasttext源码剖析   目的:记录结合多方资料以及个人理解的剖析代码: https://heleifz.github.io/14732610572844.html http://www.cnbl ...

  5. 高效率使用google,国外搜索引擎，国内顺利使用Google的另类技巧,可用谷歌镜像, 可用google学术, 如何使用robots不让百度和google收录

    Google良好的搜索和易用性已经得到了广大网友的欢迎,但是除了我们经常使用的Google网站.图像和新闻搜索之外,它还有很多其他搜索功能和搜索技巧.如果我们也能充分利用,必将带来更大的便利.这里我介 ...

  6. nc命令官方Demo实例

    nc命令可用于发送任务tcp/udp连接和监听. 官方描述的主要功能包括: simple TCP proxies shell-script based HTTP clients and servers ...

  7. XStream入门应用程序

    在进入XStream库的细节之前,让我们来看看应用程序操作.在这个例子中,我们创建Student和Address类.还将创建一个Student对象,然后将其序列化到一个XML字符串.然后反序列化的同一 ...

  8. Python做数据预处理

    在拿到一份数据准备做挖掘建模之前,首先需要进行初步的数据探索性分析(你愿意花十分钟系统了解数据分析方法吗?),对数据探索性分析之后要先进行一系列的数据预处理步骤.因为拿到的原始数据存在不完整.不一致. ...

  9. de4Dot用法 解决 .net程序 reflecter反编译 “索引超出了数组界限”问题

    de4Dot 反混淆工具.当你反编译 .net写的dll 或exe时出现:索引超出了数组界限 问题时 可以去网上下这个工具,通过cmd命令 打开de4dot的exe 空格 dll的全路径. 这样 :D ...

  10. VB.NET利用正則表達式巧妙限制字符输入

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u010028869/article/details/37913867     在通常的程序设计中.对 ...