一，效果图。

二，代码。

<!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. unable to load http://docbook.sourceforge.net/release/xsl/current/html/docbook.xsl

    问题:unable to load http://docbook.sourceforge.net/release/xsl/current/html/docbook.xsl 解决:yum -y inst ...

  2. jsapi微信支付

    JSAPI微信支付 引用js <script type="text/javascript" src="http://res.wx.qq.com/open/js/jw ...

  3. Akka-Cluster（0）- 分布式应用开发的一些想法

    当我初接触akka-cluster的时候,我有一个梦想,希望能充分利用actor自由分布.独立运行的特性实现某种分布式程序.这种程序的计算任务可以进行人为的分割后再把细分的任务分派给分布在多个服务器上 ...

  4. MySQL的时间、日期型

    MySQL的时间.日期型 MySQL中表示时间值的有DATE.时间类型为DATETIME.DATE.TIMESTAMP.TIME和YEAR.每个时间类型有一个有效值范围和一个"零" ...

  5. IDEA内置git功能的使用教程

    IDEA内置git功能的使用教程 IDEA git  IDEA被公认为是最好的java开发工具,除了在代码助手.代码提示.重构工具等方面有比较好的支持,还在各类版本控制工具(git.tfs.svn.g ...

  6. gitlab服务部署及使用

    一.什么是gitlib Gitlab 是一个基于Git实现的在线代码仓库托管软件,你可以用Gitlab自己搭建一个类似于Github一样的系统平台,一般搭建gitlab私服就是用在公司的内部 Gitl ...

  7. Java异常处理设计（三）

    接着上一篇讲. 一个异常日志处理的例子: 抛出异常的地方为: try{ ... ...//省略N行 }catch( Exception e){ throw new RuntimeException ( ...

  8. jquery 回车键实现表单提交

    JQery http://jquery.cuishifeng.cn/keydown.html 键盘事件参考:1.keydown()keydown事件会在键盘按下时触发.2.keyup()keyup事件 ...

  9. 使用mybatis中的自定义TypeHandler处理PostgreSQL中的Json类型字段

    业务扩展字段在PostgreSQL数据库中经常会使用json格式的数据来存储,然而mybatis默认是没有实现json类型字段对应的TypeHandler,所以一般我们需要自定义mybatis的Typ ...

  10. C51 玄学问题，magic

    0x00 问题代码 void int0_isr(void) interrupt 0 { num++; if (num%2 == 1) { uint k; for(k=0;k<3;k++) { P ...