使用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. var 更明确地表示一个变量被设置为零值

    创建一个变量并被初始化其为零值,习惯使用关键字var.这种做法是为了更明确地表示一个变量被设置为零值. 如果变量被初始化为某个非零值,就配合结构字面量和短变量操作符来创建变量. 零值 数值类型:0 字 ...

  2. JVM内核-原理、诊断与优化学习笔记（四）：GC算法与种类

    文章目录 GC的概念 GC算法 引用计数法 引用计数法的问题 标记清除 标记压缩 小问题 复制算法 复制算法的最大问题是:空间浪费 整合标记清理思想 -XX:+PrintGCDetails的输出 gc ...

  3. 漏洞验证系列--MongoDB未授权访问

    本系列文章旨在对于有一定网络安全基础的人员,在日常工作中扫描出来的各种漏洞,如何进行验证,以区分该漏洞是否存在或是扫描器误报.请勿应用非法途径. 本漏洞是由于MongoDB未设置访问权限,用户可以直接 ...

  4. Git 学习（二）Git 基础

    Git 基础 Git 在保存和对待各种信息的时候与其它版本控制系统如 SVN 等等有很大差异,尽管操作起来的命令形式非常相近,理解这些差异将有助于防止你使用中的困惑. Git 记录的是什么? 如果有使 ...

  5. 《Java语言程序设计》编程练习6.18(检测密码)

    6.18 (检测密码)一些网站对于密码具有一些规则.编写一个方法,检测字符串是否是一个有效密码.     假定密码规则如下:     • 密码必须至少8位字符.     • 密码仅能包含字母和数字. ...

  6. python学习2—python3特性与各种运算符

    python学习2—python3特性与各种运算符 python3与python2相比具有的新特性 在python2中可以使用__future__模块调用python3的特性 print()函数必须带 ...

  7. js中不同类型作比较

    示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <met ...

  8. 常用指令linux总结

    linux的基础操作命令: 常见命令: man 查看帮助文档 用法:man + 命令 help 查看指定命令的用法 用法: 命令 --help(有空格) tab linux下命令与文件名补全 用法:在 ...

  9. 2019-3-20-win10-uwp-如何自定义-RichTextBlock-右键菜单

    title author date CreateTime categories win10 uwp 如何自定义 RichTextBlock 右键菜单 lindexi 2019-3-20 9:54:9 ...

  10. Mysql优化-字段设计

    摘抄并用于自查笔记 1. 对精度有要求decimal float 类型用于表示单精度浮点数值,而double类型用于表示双精度浮点数值,float 和 double 都是浮点型,而 decimal 是 ...