使用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. NX二次开发-C++ DeleteFile删除文件实例代码

    NX9+VS2012 #include<Windows.h> DeleteFile("D:\\1\\test123.prt"); Caesar卢尚宇 2019年7月29 ...

  2. Java习题10.25

    Java习题10.25 1. 实际上这道题考查的是两同两小一大原则: 方法名相同,参数类型相同 子类返回类型小于等于父类方法返回类型, 子类抛出异常小于等于父类方法抛出异常, 子类访问权限大于等于父类 ...

  3. nagios监控实用教程

    nagios监控实用教程 Nagios作为开源网络监视工具,它不但可以有效的监控内存.流量.数据库使用情况.它还可以Windows.Linux主机状态.本专题收录了有关Nagios监控相关文章,供大家 ...

  4. Dll注入技术之远程线程注入

    DLL注入技术之远线程注入 DLL注入技术指的是将一个DLL文件强行加载到EXE文件中,并成为EXE文件中的一部分,这样做的目的在于方便我们通过这个DLL读写EXE文件内存数据,(例如 HOOK EX ...

  5. leetcode题解（持续更新）

    leetcode题解 1.两数之和 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但 ...

  6. 【POJ】2387 Til the Cows Come Home

    题目链接:http://poj.org/problem?id=2387 题意:求从1到n的最短路 题解:板子题.spfa. 代码: #include<iostream> #include& ...

  7. jdbc_mysql----函数助手参数化

    第一个值填写的是文件路径 第二个值填写的是从第几个开始执行,从0开始

  8. Mybatis 使用Mapper接口的Sql动态代码方式进行CURD和分页查询

    1.Maven的pom.xml 2.配置文件 2.1.db.properties 2.2.mybatis.xml 2.3.log4j.xml 3.MybatisUtil工具类 4.Mapper映射文件 ...

  9. 关于用Linux桌面版当工作系统这件事

    Linux稳定性好,Linux软件开放--不过等到决定把Linux当作日常工作用系统时,就一言难尽了-- 我日常工作的需求有: 笔记本扩展屏幕 Golang开发 docker/kubernetes 输 ...

  10. c_数据结构_哈希表

    #include <stdio.h> #include <stdlib.h> #include <string.h> #define ERROR 0 #define ...