1. HTML 表单用于收集不同类型的用户输入。
  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>菜鸟教程(runoob.com)</title> 
  6. </head>
  7. <body>
  8.  
  9. <form action="">
  10. First name: <input type="text" name="firstname"><br>
  11. Last name: <input type="text" name="lastname">
  12. </form>
  13.  
  14. <p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>
  15.  
  16. </body>
  17. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>菜鸟教程(runoob.com)</title> 
  6. </head>
  7. <body>
  8.  
  9. <form action="">
  10. Username: <input type="text" name="user"><br>
  11. Password: <input type="password" name="password">
  12. </form>
  13.  
  14. <p><b>注意：</b> 密码字段中的字符是隐藏的(显示为星号或圆圈)。</p>
  15.  
  16. </body>
  17. </html>

  1. HTML 表单
  2. 表单是一个包含表单元素的区域。
  3.  
  4. 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
  5.  
  6. 表单使用表单标签 <form> 来设置:
  7.  
  8. <form>
  9. .
  10. input 元素
  11. .
  12. </form>
  1. HTML 表单 - 输入元素
  2. 多数情况下被用到的表单标签是输入标签（<input>）。
  3.  
  4. 输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：
  5.  
  6. 文本域（Text Fields）
  7. 文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
  8.  
  9. <form>
  10. First name: <input type="text" name="firstname"><br>
  11. Last name: <input type="text" name="lastname">
  12. </form>
  1. 密码字段
  2. 密码字段通过标签<input type="password"> 来定义:
  3.  
  4. <form>
  5. Password: <input type="password" name="pwd">
  6. </form>
  1. 单选按钮（Radio Buttons）
  2. <input type="radio"> 标签定义了表单单选框选项
  3.  
  4. <form>
  5. <input type="radio" name="sex" value="male">Male<br>
  6. <input type="radio" name="sex" value="female">Female
  7. </form>
  1. 复选框（Checkboxes）
  2. <input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
  3.  
  4. <form>
  5. <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
  6. <input type="checkbox" name="vehicle" value="Car">I have a car
  7. </form>
  1. 提交按钮(Submit Button)
  2. <input type="submit"> 定义了提交按钮.
  3.  
  4. 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:
  5.  
  6. <form name="input" action="html_form_action.php" method="get">
  7. Username: <input type="text" name="user">
  8. <input type="submit" value="Submit">
  9. </form>
  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>菜鸟教程(runoob.com)</title> 
  6. </head>
  7. <body>
  8.  
  9. <form action="">
  10. <select name="cars">
  11. <option value="volvo">Volvo</option>
  12. <option value="saab">Saab</option>
  13. <option value="fiat">Fiat</option>
  14. <option value="audi">Audi</option>
  15. </select>
  16. </form>
  17.  
  18. </body>
  19. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>菜鸟教程(runoob.com)</title> 
  6. </head>
  7. <body>
  8.  
  9. <form action="">
  10. <select name="cars">
  11. <option value="volvo">Volvo</option>
  12. <option value="saab">Saab</option>
  13. <option value="fiat" selected>Fiat</option>
  14. <option value="audi">Audi</option>
  15. </select>
  16. </form>
  17.  
  18. </body>
  19. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>菜鸟教程(runoob.com)</title> 
  6. </head>
  7. <body>
  8.  
  9. <textarea rows="10" cols="30">
  10. 我是一个文本框。
  11. </textarea>
  12.  
  13. </body>
  14. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>菜鸟教程(runoob.com)</title> 
  6. </head>
  7. <body>
  8.  
  9. <form action="">
  10. <input type="button" value="Hello world!">
  11. </form>
  12.  
  13. </body>
  14. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>菜鸟教程(runoob.com)</title> 
  6. </head>
  7. <body>
  8.  
  9. <form action="">
  10. <fieldset>
  11. <legend>Personal information:</legend>
  12. Name: <input type="text" size="30"><br>
  13. E-mail: <input type="text" size="30"><br>
  14. Date of birth: <input type="text" size="10">
  15. </fieldset>
  16. </form>
  17.  
  18. </body>
  19. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>菜鸟教程(runoob.com)</title> 
  6. </head>
  7. <body>
  8.  
  9. <form action="demo-form.php">
  10. First name: <input type="text" name="FirstName" value="Mickey"><br>
  11. Last name: <input type="text" name="LastName" value="Mouse"><br>
  12. <input type="submit" value="提交">
  13. </form>
  14.  
  15. <p>点击"提交"按钮，表单数据将被发送到服务器上的“demo-form.php”。</p>
  16.  
  17. </body>
  18. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>菜鸟教程(runoob.com)</title> 
  6. </head>
  7. <body>
  8.  
  9. <form action="demo-form.php" method="get">
  10.   <input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
  11.   <input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
  12.   <input type="submit" value="提交">
  13. </form>
  14.  
  15. </body>
  16. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>菜鸟教程(runoob.com)</title> 
  6. </head>
  7. <body>
  8.  
  9. <h3>发送邮件到 someone@example.com:</h3>
  10.  
  11. <form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
  12. Name:<br>
  13. <input type="text" name="name" value="your name"><br>
  14. E-mail:<br>
  15. <input type="text" name="mail" value="your email"><br>
  16. Comment:<br>
  17. <input type="text" name="comment" value="your comment" size="50"><br><br>
  18. <input type="submit" value="发送">
  19. <input type="reset" value="重置">
  20. </form>
  21.  
  22. </body>
  23. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>菜鸟教程(runoob.com)</title> 
  6. </head>
  7. <body>
  8.  
  9. <p>点击其中一个文本标签选中选项：</p>
  10.  
  11. <form action="demo_form.php">
  12.   <label for="male">Male</label>
  13.   <input type="radio" name="sex" id="male" value="male"><br>
  14.   <label for="female">Female</label>
  15.   <input type="radio" name="sex" id="female" value="female"><br><br>
  16.   <input type="submit" value="提交">
  17. </form>
  18.  
  19. </body>
  20. </html>

  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>菜鸟教程(runoob.com)</title> 
  6. </head>
  7. <body>
  8.  
  9. <select>
  10.   <optgroup label="Swedish Cars">
  11.     <option value="volvo">Volvo</option>
  12.     <option value="saab">Saab</option>
  13.   </optgroup>
  14.   <optgroup label="German Cars">
  15.     <option value="mercedes">Mercedes</option>
  16.     <option value="audi">Audi</option>
  17.   </optgroup>
  18. </select>
  19.  
  20. </body>
  21. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>菜鸟教程(runoob.com)</title> 
  6. </head>
  7. <body>
  8.  
  9. <form action="demo-form.php" method="get">
  10. <input list="browsers" name="browser">
  11. <datalist id="browsers">
  12.   <option value="Internet Explorer">
  13.   <option value="Firefox">
  14.   <option value="Chrome">
  15.   <option value="Opera">
  16.   <option value="Safari">
  17. </datalist>
  18. <input type="submit">
  19. </form>
  20.  
  21. <p><strong>注意:</strong> Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签。</p>
  22.  
  23. </body>
  24. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>菜鸟教程(runoob.com)</title> 
  6. </head>
  7. <body>
  8.  
  9. <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  10. <input type="range" id="a" value="50">100
  11. +<input type="number" id="b" value="50">
  12. =<output name="x" for="a b"></output>
  13. </form>
  14.  
  15. <p><strong>注意:</strong>  Internet Explorer 不支持 output 标签。</p>
  16.  
  17. </body>
  18. </html>

吴裕雄--天生自然HTML学习笔记：HTML 表单和输入的更多相关文章

  1. 吴裕雄--天生自然HADOOP学习笔记：hadoop集群实现PageRank算法实验报告

    实验课程名称:大数据处理技术 实验项目名称:hadoop集群实现PageRank算法 实验类型:综合性 实验日期:2018年 6 月4日-6月14日 学生姓名 吴裕雄 学号 15210120331 班 ...

  2. 吴裕雄--天生自然 oracle学习笔记：oracle理论学习详解及各种简单操作例子

    1. 数据库的发展过程 层次模型 -->网状模型 -->关系模型 -->对象关系模型 2. 关于数据库的概念 DB:数据库(存储信息的仓库) DBMS:数据库管理系统(用于管理数据库 ...

  3. 吴裕雄--天生自然HADOOP学习笔记：基本环境配置

    实验目的 学习安装Java 学习配置环境变量 学习设置免密码登陆的方法 掌握Linux环境下时间同步的配置 实验原理 1.Java的安装 java是大数据的黄金语言,这和java跨平台的特性是密不可分 ...

  4. 吴裕雄--天生自然HADOOP学习笔记：使用yum安装更新软件

    实验目的 了解yum的原理及配置 学习软件的更新与安装 学习源代码编译安装 实验原理 1.编译安装 前面我们讲到了安装软件的方式,因为linux是开放源码的,我们可以直接获得源码,自己编译安装.例如: ...

  5. 吴裕雄--天生自然HADOOP学习笔记：Shell工具使用

    实验目的 学习使用xshell工具连接Linux服务器 在连上的服务器中进入用户目录 熟悉简单的文件操作命令 实验原理 熟悉shell命令是熟悉使用linux环境进行开发的第一步,我们在linux的交 ...

  6. 吴裕雄--天生自然MySQL学习笔记：MySQL UPDATE 更新

    如果需要修改或更新 MySQL 中的数据,我们可以使用 SQL UPDATE 命令来操作. 语法 以下是 UPDATE 命令修改 MySQL 数据表数据的通用 SQL 语法: UPDATE table ...

  7. 吴裕雄--天生自然MySQL学习笔记：MySQL 插入数据

    MySQL 表中使用 INSERT INTO SQL语句来插入数据. 可以通过 mysql> 命令提示窗口中向数据表中插入数据,或者通过PHP脚本来插入数据. 以下为向MySQL数据表插入数据通 ...

  8. 吴裕雄--天生自然python学习笔记：python 用pyInstaller模块打包文件

    要想在没有安装 Python 集成环境的电脑上运行开发的 Python 程序,必须把 Python 文件打包成 .exe 格式的可执行 文件. Python 的打包工作 PyInstaller 提供了 ...

  9. 吴裕雄--天生自然python学习笔记：python 用pygame模块动画一让图片动起来

    动画是游戏开发中不可或缺的要素,游戏中的角色只有动起来才会拥有“生命”, 但动画处理也是最让游戏开发者头痛的部分.Pygame 包通过不断重新绘制绘图窗口,短短几行代码就可以让图片动起来! 动画处理程 ...

  10. 吴裕雄--天生自然python学习笔记：python 文件批量查找

    在多个文本文件中查找 我们首先来学习文本文件的查找字符 . 我们通过 os.walk 扩大查找范围, 查找指定目录和子目录下的文件. 应用程序总览 读取 当 前目录及子目录下的所有 PY 和 txt ...

随机推荐

  1. POJ - 1061 扩展欧几里德算法+求最小正整数解

    //#pragma comment(linker, "/STACK:1024000000,1024000000") //#pragma GCC optimize(2) #inclu ...

  2. php速成_day1

    一.概述 1.什么是PHP PHP ( Hypertext Preprocessor ),是英文超级文本预处理语言的缩写.PHP 是一种 跨平台.嵌入式的服务器端执行的描述语言,是一种在服务器端执行的 ...

  3. Necklace HDU - 3874 （线段树/树状数组 + 离线处理）

    Necklace HDU - 3874  Mery has a beautiful necklace. The necklace is made up of N magic balls. Each b ...

  4. day61-mysql-索引原理和慢查询优化

    ProgramData是C盘隐藏的文件夹,mysql的data文件夹在里面,C:\ProgramData\MySQL\MySQL Server 8.0\Data 一.存储引擎 重点[面试题]: inn ...

  5. flask框架-下

    Local与偏函数 threasing.local 多个线程修改同一个数据,复制多份变量给每个线程用,为每个线程开辟一块空间进行数据存储. 不使用therading.local # 不用local f ...

  6. 第二季第八天 part2

    for (let i = 0; i < 3; i++) { log(i) } log(i) // 结果是 undefined let和const的作用域只在花括号内 let和const不能重复声 ...

  7. 关于Vue.js的认识（第一部分）[转载]

    一.关于v-bind 1.初识v-bind (1).加冒号的是 vue 的 v-bind 语法糖(指计算机语言中添加的某种语法,这种语法对语言的功能并没有影响,但是更方便程序员使用),绑定vue的一个 ...

  8. C++对象的动态建立与释放

    new运算符动态分配堆内存  (从堆分配一块“类型”大小的存储空间,并且返回首地址) 1.写程序的时候,经常需要动态的分配和撤销内存空间,C语言中常常是利用库函数 malloc 和 free 来分配和 ...

  9. Activity组件（三）：通过对象实现信息添加及展示

    在对组件进行注册时,只注册了EditText,却忘记了Button,导致程序一直闪退 输入信息 点击添加 成功跳转页面,并将数据传递 User.java package com.example.reg ...

  10. 给select赋值之后，再点击选择下拉值时，显示一值不变的解决

    在一个项目需求中,请求数据,得到的数据dataAll渲染到页面的select下拉表单中,当时是需要一进页面就要默认选中第一个选项,所以直接将dataAll的第一个索引值赋值给了表单的绑定值formVa ...