使用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. 牛客多校第八场 C CDMA 线性代数：沃尔什矩阵

    题意: 构造出一个由1和-1组成的$2^k*2^k$的矩阵,使得矩阵任意两列内积为0 题解: 数学知识,沃尔什矩阵.沃尔什矩阵的特性被CDMA(码分多址)采用,使得编码成为无线信号的频段和振幅之外的第 ...

  2. AtCoder ABC 128D equeue

    题目链接:https://atcoder.jp/contests/abc128/tasks/abc128_d 题目大意 有一个双端队列,里面有 N 个整数,你可以进行如下4种操作: A:从队头那一个到 ...

  3. LeetCode刷题笔记-回溯法-括号生成

    题目描述: 给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: [ "((()))", "( ...

  4. shell脚本实现取当前时间

    shell 实现获取当前时间,并进行格式转换的方法: 1)原格式输出 2018年 09月 30日 星期日 15:55:15 CST time1=$(date) echo $time1 2)时间串输出 ...

  5. 使用SDK方式进行微信授权

    1.在pom.xml中添加依赖 <dependency> <groupId>com.github.binarywang</groupId> <artifact ...

  6. python下pip使用bug汇总

    PS:以下操作全部基于win10 64位操作系统 pip安装任何包都出现问题: Cannot unpack file /tmp/pip-KzJgHD-unpack/simple 报错: Cannot ...

  7. USACO 2008 January Silver Telephone Lines /// 二分最短路 邻接表dijkstra oj22924

    题目大意: 一共有N (1 ≤ N ≤ 1,000)个电线杆,有P P (1 ≤ P ≤ 10,000)对电线杆是可以连接的, 用几条线连接在一起的电线杆之间都可相互通信,现在想要使得电线杆1和电线杆 ...

  8. CentOS7中下载MySQL

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~CentOS 7中,yum默认安装的是Mariadb,但我想使用MyS ...

  9. linux安装openoffice，并解决中文乱码

    1.安装openoffice 官网http://www.openoffice.org/zh-cn/download/下载 2.解压并进入文件夹: cd /zh-cn/RPMS yum localins ...

  10. drools原生drl规则文件的使用

    在初识drools中对drl文件进行了简单的介绍.这里举个例子来具体说明下.主要是写了规则之后我们如何用java代码来run起来. drl文件内容如下: rule "ageUp12" ...