一，效果图。

二，代码。

<!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. Swift5 语言指南(十五) 继承

    类可以从另一个类继承方法,属性和其他特性.当一个类继承自另一个类时,继承类称为子类,它继承的类称为其超类.继承是一种基本行为,它将类与Swift中的其他类型区分开来. Swift中的类可以调用和访问属 ...

  2. Shell-12 -- case

    case 是一种匹配选择执行的结构,相当于java中的switch

  3. thinkpad的E480安装ubuntu后wifi无法使用问题解决

    买了新电脑,安装ubuntu新系统之后,遇到了一个比较麻烦的问题,在ubuntu中,无法使用wifi. 用新产品就是要当小白鼠啊,查了一下资料,发现这个使用的rtl8821ce的wifi芯片,该wif ...

  4. PCIE 2.0协议概念基本科普

    PCIE的概念:是电脑总线PCI的一种,它沿用现有的PCI编程概念及通信标准,但建基于更快的串行通信系统. 英特尔是该接口的主要支持者.PCIe仅应用于内部互连.由于PCIe是基于现有的PCI系统,只 ...

  5. Spark 的 Shuffle过程介绍`

    Spark的Shuffle过程介绍 Shuffle Writer Spark丰富了任务类型,有些任务之间数据流转不需要通过Shuffle,但是有些任务之间还是需要通过Shuffle来传递数据,比如wi ...

  6. Python进程-理论

    进程定义 程序: 计算机程序是存储在磁盘上的可执行二进制(或其他类型)文件.只有把它们加载到内存中,并被操作系统调用,它们才会拥有其自己的生命周期. 进程: 进程则是表示的一个正在执行的程序.每个进程 ...

  7. Volley Get网络请求

    public class VolleyActivity extends AppCompatActivity { WebView webView; Button button; RequestQueue ...

  8. SpringBoot的幕后推手...

    一.背景 ​ 这两年随着微服务的盛行,SpringBoot框架水到渠成的得到了高曝光,作为程序猿的我们,现在要是不知道一点SpringBoot相关的东西,貌似出去找工作都会被深深地鄙视,不过在我们开始 ...

  9. php -- 目录、路径、磁盘

    ----- 028-dir.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv="co ...

  10. Kafka实战－实时日志统计流程

    1.概述 在<Kafka实战-简单示例>一文中给大家介绍来Kafka的简单示例,演示了如何编写Kafka的代码去生产数据和消费数据,今天给大家介绍如何去整合一个完整的项目,本篇博客我打算为 ...