一，效果图。

二，代码。

<!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. unity 简单通用游戏模式设计

    好吧好吧,又谈到这个问题了,其实早就想写这个博客了,犹豫了好久.在设计游戏的时候我本人是很排斥什么游戏架构设计,mvc什么的,我只想马上动手就把自己的游戏玩法最快的用代码敲出来,还不会出无法挽回的错误 ...

  2. WHU1124 Football Match

    http://acm.whu.edu.cn/learn/problem/detail?problem_id=1124 题目大意:有N支球队,你们是第N支.每个队伍已经有一些分数了,接下来还有M场比赛. ...

  3. 基于vue的颜色选择器vue-color-picker

    项目中有用到颜色选择器的童鞋们可以看过来了 关于color-picker的jquery的插件是有蛮多,不过vue组件没有吧,反正我没有找到, 虽然element-ui里面有这个,但是你愿意为了一个小功 ...

  4. Android 开发工具推荐

    简评: 自己过去在 Android 开发中发现的好工具,在这里分享给大家.: ) Library methods count 每一个 Android App 的开发中都会用到很多的库,这个工具能够让你 ...

  5. Linux下安装配置与使用MySQL数据库

    Linux下安装配置与使用MySQL数据库 在Linux下安装做开发时往往少不了要使用到MySQL数据库,下面就Linux系统为例讲解一下,如何安装MySQL数据库,如何启用/停.止MySQL服务,如 ...

  6. Dispatch Queue 之 dispatch_sync

    

  7. Network - 互联网协议简介

    珠玉在前,不在赘言 互联网协议入门(一) 互联网协议入门(二) 通信协议:HTTP.TCP.UDP 互联网协议入门 互联网协议入门深入 当你输入一个网址,实际会发生什么? Wireshark基本介绍和 ...

  8. org.springframework.web.servlet.mvc.multiaction.NoSuchRequestHandlingMethodException

    相信很多的朋友在开发过程中都或多或少的遇见一些异常,下面我给大家说一说NoSuchRequestHandlingMethodException 这个异常说的是找不到处理这样的请求方法,那是什么原因导致 ...

  9. docker学习篇（二）---- 基础篇

    引言 在之前的学习中,我知道了docker的三大组件分别是----镜像,容器,仓库.了解了这三个组件也就初步理解了docker.所以我学习了这三个组件,并记录下来. 镜像 docker在运行一个容器时 ...

  10. Python 解析har 文件将域名分类导出

    前言 作为程序员平时主要是使用 shadowsocks 作为代理工具的.shadowsocks 有个很明显的优点儿就是可以设置白名单和黑名单.白名单是会走shadowsocks的自动代理模式. 遇到的 ...