一，效果图。

二，代码。

<!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. vs2008快捷键一览表

    Ctrl+E,D ----             格式化全部代码 Ctrl+K,F ----             格式化选中的代码 CTRL + SHIFT + B          生成解决方 ...

  2. 在源文件（.c）和头文件（.h）中声明和定义的区别——C语言

    最近在看多文件编程的时候遇到的一个问题,本来以为理解了声明和定义的区别(然而并没有····),也算是重新认识了一次声明和定义,下面上代码 情形一:在源文件(.c)中 相信大部分读者对声明和定义的理解是 ...

  3. Redis 学习笔记（十二）Redis 复制功能详解 ----- (error) READONLY You can't write against a read only slave

    Redis 复制(Replication)1. 复制介绍分布式数据库为了获取更大的存储容量和更高的并发访问量,会将原来集中式数据库中的数据分散存储到多个通过网络连接的数据存储节点上.Redis为了解决 ...

  4. Java 数组的创建

    与C.C++不同,Java在定义数组时并不为数组元素分配内存,因此[ ]中无需指定数组元素的个数,即数组长度. 定义一个数组有两种方式: int[] array; int array[]; 对于如上定 ...

  5. 从零搭建java后台管理系统（二）mysql和redis安装

    接上篇开始安装mysql和redis 注意了,如果用阿里云服务器,外网访问的端口必须在安全组开启,否则外网访问不通 三.服务器安装redis和mysql 本次环境搭建将所有第三方服务会安装在阿里云服务 ...

  6. 数组的三种声明方式总结、多维数组的遍历、Arrays类的常用方法总结

    1. 数组的三种声明方式 public class WhatEver { public static void main(String[] args) { //第一种 例: String[] test ...

  7. NodeJS简单爬虫

    NodeJS简单爬虫 最近一直在追火星的一本书,然后每次都要去网站看,感觉很麻烦,于是,想起用爬虫爬取章节,务实派,说干就干! 爬取思路 1.该网站的页面呈现出一定的规律 2.使用NodeJS的req ...

  8. Windows系统环境下创建mysql主从数据库方法（双向主从复制）

    创建mysql主从数据库方法(双向主从复制) (一)Windows系统下的MySQL主从复制(单向复制) (1)环境说明: 1,Mysql版本:mysql5.7.20(主从机mysql版本必须一致) ...

  9. ProxySQL Cluster 高可用集群环境部署记录

    ProxySQL在早期版本若需要做高可用,需要搭建两个实例,进行冗余.但两个ProxySQL实例之间的数据并不能共通,在主实例上配置后,仍需要在备用节点上进行配置,对管理来说非常不方便.但是Proxy ...

  10. 如何做自己的服务监控？spring boot 1.x服务监控揭秘

    1.准备 下载可运行程序:http://www.mkyong.com/spring-boot/spring-boot-hello-world-example-jsp/ 2.添加服务监控依赖 <d ...