使用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. 李宏毅机器学习课程---3、Where does the error come from

    李宏毅机器学习课程---3.Where does the error come from 一.总结 一句话总结:机器学习的模型中error的来源是什么 bias:比如打靶,你的瞄准点离准心的偏移 va ...

  2. Linux环境上的图形化界面SVN客户端软件“RabbitVCS”

    RabbitVCS基本支持所有的Linux发行版本包括ubuntu.Debian.Fedora.Arch Linux.Gentoo.Mandriva.OpenSUSE.RHEL.CentOS 5等.其 ...

  3. 8.RabbitMQ 消息传递Java对象

    通过消息服务器传递Java对象,Java类必须实现序列化接口,可以把Java对象转化为字节数组,从消费者或生产者传递到另外一个JVM中,一定需要两个JVM共享这个类,比如是UserInfo类.   1 ...

  4. docker网络原理

    以下内容引用Docker -- 从入门到实践 当 Docker 启动时,会自动在主机上创建一个 docker0 虚拟网桥,实际上是 Linux 的一个 bridge,可以理解为一个软件交换机.它会在挂 ...

  5. [转]WinForm DataGridView 绑定泛型List(List<T>)/ArrayList不显示的原因和解决

    背景:无意间遇到了一个不大不小的问题,希望对一些遇到的人有所帮助! 一.问题 WinForm DataGridView 绑定泛型List (List<T>)/ArrayList不显示,UI ...

  6. JS事件 鼠标经过事件（onmouseover）鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

    鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定&quo ...

  7. leetcode-157周赛-5214-最长定差子序列

    题目描述: class Solution: def longestSubsequence(self, arr: List[int], difference: int) -> int: dp = ...

  8. leetcode-229-求众数②

    题目描述: 方法一:摩尔投票法 class Solution: def majorityElement(self, nums: List[int]) -> List[int]: candiate ...

  9. [JZOJ3339]【NOI2013模拟】wyl8899和法法塔的游戏

    题目 题目大意 给你一个数列,每次给出\(r,a,b\),你要找到\(l\in [a,b]\)使得\([l,r-1]\)的异或和最小, 并且要修改\(r\)位置的数. 思考历程 当我看到这题的时候,已 ...

  10. ZuulFilter

    在服务网关中定义过滤器,只需要继承ZuulFilter抽象类,实现其定义的四个抽象函数,就可对请求进行拦截与过滤 过滤器两个功能: 路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入 ...