一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>html 列表</title>

</head>

<body>

    <!--创建文本字段text field-->

    <form action="">

        first name:

        <input type="text" name="first name">

        <br> last name:

        <input type="text" name="last name">

    </form>

    <!--创建密码字段-->

    <form action="">

        Username:

        <input type="text" name="user">

        <br> Password:

        <input type="password" name="password">

    </form>

    <!--单选按钮-->

    <form>

        <input type="radio" name="sex" value="male">Male

        <br>

        <input type="radio" name="sex" value="female">female

    </form>

    <!--复选框-->

    <form>

        <input type="checkbox" name="vehicle" value="bike">I have a bike</br>

        <input type="checkbox" name="vehicle" value="car">I have a car

    </form>

    <!--提交按钮-->

    <form name="input" action="html_form_action.php" method="get">

        username:

        <input type="text" name="user">

        <input type="submit" value="submit">

    </form>

    <!--简单的下拉列表-->

    <form action="">

        <select name="cars">

            <option value="volvo">volvo</option>

            <option value="saab">saab</option>

            <option value="fiat">fiat</option>

            <option value="audi">audi</option>

        </select>

    </form>

    <!--预选下拉列表-->

    <form action="">

        <select name="cars">

            <option value="volvo">volvo</option>

            <option value="saab">saab</option>

            <option value="fiat" selected>fiat</option>

            <option value="audi">audi</option>

        </select>

    </form>

    <!--文本域-->

    <textarea rows="10" cols="30">

        我是一个文本框

    </textarea>

    <!--创建按钮-->

    <form acion="">

        <input type="button" value="hello world!">

    </form>

    <!--带边框的表单-->

    <form action="">

        <fieldset>

            <legend>

                personal information

            </legend>

            name:

            <input type="text" size="30">

            <br> email:

            <input type="text" size="30">

            <br> date of birth:

            <input type="text" size="10">

        </fieldset>

    </form>

    <!--带有输入框和确认按钮的表单-->

    <form action="demo-form.php">

        first name:

        <input type="text" name="first name" value="mickey">

        <br> last name:

        <input type="text" name="lastname" value="mouse">

        <br>

        <input type="submit" value="submit">

    </form>

    <!--带有复选框的表单-->

    <form action="demo-form.php" method="get">

        <input type="checkbox" name="vehicle" value="bike">i have a bike

        <br>

        <input type="checkbox" name="vehicle" value="car" checked="checked"> i have a car

        <br>

        <input type="submit" value="submit">

    </form>

    <!--带有单选按钮的表单-->

    <form action="demo-form.php" method="get">

        <input type="radio" name="sex" value="male">male

        <br>

        <input type="radio" name="sex" value="female" checked="checked">female

        <br>

        <input type="submit" value="submit">

    </form>

    <!--从表单发送电子邮件-->

    <form action="MAILTO:someone@example.com" method="post" enctype="text/plain">

        Name:

        <br>

        <input type="text" name="name" value="your name">

        <br> e-mail:

        <br>

        <input type="text" name="mail" value="your email">

        <br> comment:

        <br>

        <input type="text" name="comment" value="you comment" size="50">

        <br>

        <br>

        <input type="submit" value="sendd">

        <input type="reset" value="reset">

    </form>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-HTML-表单的更多相关文章

  1. 【代码笔记】Web-JavaScript-JavaScript表单验证

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  2. Ext JS4 学习笔记之发送表单（Form）时也将表单下的表格（Grid）数据一同发送的方法

    Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...

  3. .Net web 关于表单标题

    今天跟以前同事学到一个好东西,就是后台web界面表单标题展示的一个方法,新学到的一个方法...赶紧分享一下 在model 属性上加  [DisplayName("标题"), Req ...

  4. Yii学习笔记之四（表单验证 api 翻译）

    1.表单验证 对于用户输入的全部数据,你不能信任,必须加以验证. 全部框架如此.对于yii 能够使用函数  yii\base\Model::validate()  进行验证 他会返回boolean值的 ...

  5. KindEditor设置为过滤模式，但在代码模式下提交表单时不过虑HTML标签的解决方法

    KindEditor设置filterMode为true,但在代码模式下提交表单的话,发现并没有过虑掉自己不想保留的HTML标签. 这时只需同步内容前加上红色部分内容即可: onClick=" ...

  6. java web解决表单重复提交问题

    我们大家再进行web开发的时候,必不可少会遇见表单重复提交问题.今天就来给总结如何解决表单提交问题,欢迎大家交流指正. 首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提 ...

  7. HTML5学习笔记<五>: HTML表单和PHP环境搭建

    HTML表单 1. 表单用于不同类型的用户输入 2. 常用的表单标签: 标签 说明 <form> 表单 <input> 输入域 <textarea> 文本域 < ...

  8. java web解决表单重复提交

    首先我们在讨论如何解决表单重复提交问题之前先来解决三个问题:1.什么叫表单重复提交?2.什么情况下会出现表单重复提交?3.什么情况需要避免表单重复提交? 什么叫表单提交问题,说白了,就是同一份信息,重 ...

  9. web之表单form

    表单是我们平常编写Web应用常用的工具,表单(<form>)用来收集用户提交的数据,发送到服务器.比如,用户提交用户名和密码,让服务器验证,就要通过表单.表单是一个包含表单元素或控件的区域 ...

  10. Flask(python web) 处理表单和Ajax请求

    1.处理表单(form) 首先,编一个简单的html登录页面(名字为login.html(根路由jinjia2模板指定)): <html> <head> <meta ch ...

随机推荐

  1. WPF常用样式总结

    常用控件样式: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation ...

  2. 《深入理解JAVA虚拟机》——学习笔记

    JVM内存模型以及分区 JVM内存分为: 1.方法区:线程共享的区域,存储已经被虚拟机加载的类信息.常量.静态变量.即时编译器编译后的代码等数据 2.堆:线程共享的区域,存储对象实例,以及给数组分配的 ...

  3. springboot学习笔记-thymeleaf

    Thymeleaf的介绍 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: ...

  4. Android开发 - 设置DialogFragment全屏显示

    默认的DialogFragment并不是全屏,但有些需求需要我们将对话框设置为全屏(内容全屏),Android并没有提供直接的API,通过其它不同的方法设置全屏在不同的机型上总有一些诡异的问题,经过测 ...

  5. 设置win版vim启动项[利刃篇]

    vim默认启动设置有时不太好,想改一下,但是又不像windows其他软件那样,界面设置后就生效,这里需要手动设置文件才可以,那就赶紧设置一下吧! 修改文件为 vim安装目录/_vimrc 文件,或者在 ...

  6. RSA实现JS前端加密，PHP后端解密

    web前端,用户注册与登录,不能直接以明文形式提交用户密码,容易被截获,这时就引入RSA. 前端加密 需引入4个JS扩展文件,jsbn.js.prng4.js.rng.js和rsa.js. <h ...

  7. 解决SpringBoot jar包太大的问题

    转载 2017年09月18日 09:21:53 577 SpringBoot的web应用一般都添加了spring-boot-maven-plugin插件. Maven xml代码   <buil ...

  8. Dispatch Queue 内存结构

    Dispatch 源代码版本是libdispatch-84.5.5  会根据这个结构来分析dispatch_queue 对应的代码实现 参考 GCD源码分析3 -- dispatch_queue篇 ...

  9. Spring.Net封闭业务类为WebService注意点和问题

    最近遇到的一个项目中用到了标题所说的方法,用Spring.Net将业务类封闭成WebService供其它地方调用使用,感觉还是蛮新鲜的,于是在园子中搜了一篇园友写的文章(这里)自己也尝试着搭了一个环境 ...

  10. python之进程（multiprocess）

    有人说测试学习多进程(或多线程)有啥用?额告诉你很有用,特别是在自己写性能测试工具时就可以用到,而且非常方便 这里只介绍非常简单的多进程模块(multiprocessing.Process) 代码如下 ...