<!DOCTYPE HTML>

<html>

<head>

    <title>用户登录的表单</title>

</head>

<body>

<!--

form:表单  我们与服务器进行交互的地方

action:表单提交的地址

method:提交的方式

    01.get:会在url中显示用户输入的信息         不安全

    02.post:不会在url中显示用户输入的信息   相对安全

-->

  <form action="login.html" method="post">

    <!--表单元素

      name:相当于一个标记，目的就是 ：服务器获取我们的输入

      text：文本输入框

      password：密码框

      submit：提交按钮

      button：普通按钮，不具有提交表单的功能

    -->

     <p>  用户名：<input  type="text" name="userName"/></p>

      <p> 密码：<input  type="password" name="pwd"/></p>

      <input type="submit" value="登录">

      <input type="button" value="按钮">

      <input type="reset" value="重置">

  </form>

</body>

</html>

需要的login.html

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

   <h1>用户登录成功！</h1>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <title>用户登录的表单</title>

</head>

<body>

  <form action="login.html" method="post">

<!--

value：元素的初始值！  服务器通过name属性值获取value属性值

placeholder:占位符，给用户一个友好的提示

-->

     <p> 用户名：<input  type="text" name="userName" value="请您输入用户名"/></p>

     <p> 用户名：<input  type="text" name="userName" placeholder="请您输入用户名" /></p>

      <input type="submit" value="登录">

  </form>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <title>用户登录的表单</title>

</head>

<body>

  <form action="" method="post">

<!--

size:规定了文本框的长度

maxlength:文本框中输入的最大字符数

-->

     <p> 用户名：<input  type="text" name="userName" size="50" /></p>

     <p> 用户名：<input  type="text" name="userName" maxlength="10" /></p>

      <input type="submit" value="登录">

  </form>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <title>单选按钮</title>

</head>

<body>

  <form action="" method="post">

<!--  单选按钮

 type="radio"

 name：属性值要相同！保证只能选择一个！

 value：必须要设置，如果不设置，后台无法获取我们的选择！

 checked:默认被选中

-->

      <input  type="radio" name="sex" value="男" checked/>男

      <input  type="radio" name="sex" value="女"/>女

  </form>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <title>复选框</title>

</head>

<body>

<form action="" method="post">

    <!--  复选框

      type="checkbox"'

      name:保证一致，用于后台的获取！

      value：后台获取的数据

      checked:默认被选中

    -->

   <input  type="checkbox" name="love" value="sports">运动

   <input  type="checkbox" name="love" value="talk" checked>聊天

   <input  type="checkbox" name="love" value="play">玩游戏

   <input  type="checkbox" name="love" value="song">唱歌

</form>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <title>列表框</title>

</head>

<body>

<form action="" method="post">

    <!--  列表框

       select size="4"：下拉列表的高度

       option：下拉框中的每一项

       value：用户选中后，后台获取的值

       selected:默认被选中！

    -->

    <select>

         <option value="January">1月份</option>

         <option value="February" selected>2月份</option>

         <option value="March">3月份</option>

         <option value="April">4月份</option>

         <option value="May">5月份</option>

         <option value="June">6月份</option>

         <option value="July">7月份</option>

         <option value="August">8月份</option>

         <option value="September">9月份</option>

         <option value="October">10月份</option>

         <option value="November">11月份</option>

         <option value="December">12月份</option>

    </select>

</form>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <title>表单元素</title>

</head>

<body>

<!--enctype:表单的编码属性

如果表单中有文件上传的功能，必须设置multipart/form-data

-->

<form action="#" method="post" enctype="multipart/form-data">

    <!-- 按钮-->

    <input type="button" value="普通按钮">

    <input type="reset" value="重置按钮">

    <input type="submit" value="提交按钮">

    <!--图片按钮

    <input type="image" src="data:images/1.png">-->

    <!--多行文本域

    cols:列数

    row:行数

    -->

    <textarea  name="textContent" cols="10" rows="10">

        默认的文本值

    </textarea>

    <!--文件域-->

    <input type="file" name="files"><br/>

    <!--邮箱   自动验证email输入是否正确-->

    邮箱: <input type="email" name="email" required><br/>

    <!--网址   自动验证url输入是否正确-->

    网址: <input type="url" name="myUrl"><br/>

    <!--数字

     min:可以输入的最小值

    max:可以输入的最大值

    step:合法的数字间隔

    -->

    数字:<input type="number" name="num" min="0" max="120" step="10"/><br/>

    <!--滑块-->

    <input  type="range"  name="ran" min="0" max="120" step="20"><br/>

    <!--搜索框-->

    <input type="search" name="s">

    <!--日期-->

    <input type="date" min="1990-01-01">

    <input type="date" max="2016-12-09">

</form>

</body>

</html>
<!DOCTYPE HTML>

<html>

<head>

    <title>表单元素</title>

</head>

<body>

<form action="#" method="get" >

    <!--readonly:只读属性！不允许修改!-->

  用户名：<input type="text" name="userName" value="admin" readonly>

    <input type="button" value="登录禁用" disabled>

    <!--button:默认的type值是submit-->

    <button type="submit" >登录</button>

    <!--隐藏域  在页面上不会显示  但是 后台还是通过name属性值获取value属性的值-->

    <input type="hidden" name="password" value="haha"><br/>

    <!--label:自动将焦点移动到关联的表单元素上！-->

    <label for="pwds">密码：</label>

    <input type="password" name="pwd" id="pwds"><br/>

   <label>确认密码：<input type="password" name="rePwd"/></label>

    <input type="radio" name="sex" required>男

    <input type="radio" name="sex">女

    <!-- 正则表达式-->

    手机号:<input type="text" name="phone" pattern="^1[34578]\d{9}$"/>

</form>

</body>

</html>

html03表单的更多相关文章

  1. ASP.NET Aries 入门开发教程9：业务表单的开发

    前言: 经过前面那么多篇的列表的介绍,终于到了大伙期待的表单开发了. 也是本系列的最后一篇文章了! 1:表单页面的权限设置与继承 对于表单页面,权限的设置有两种: 1:你可以选择添加菜单(设置为不显示 ...

  2. 探索ASP.NET MVC5系列之~~~3.视图篇（下）---包含常用表单和暴力解猜防御

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  3. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  4. jQuery学习之路（5）- 简单的表单应用

    ▓▓▓▓▓▓ 大致介绍 接下来的这几个博客是对前面所学知识的一个简单的应用,来加深理解 ▓▓▓▓▓▓ 单行文本框 只介绍一个简单的样式:获取和失去焦点改变样式 基本结构: <form actio ...

  5. 12、Struts2表单重复提交

    什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...

  6. .net erp（办公oa）开发平台架构概要说明之表单设计器

    背景:搭建一个适合公司erp业务的开发平台.   架构概要图: 表单设计开发部署示例图    表单设计开发部署示例说明1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,但是如 ...

  7. javascript表单的Ajax 提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...

  8. 玩转spring boot——AOP与表单验证

    AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...

  9. from表单提交数据之后，后台对象接受不到值

    如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...

随机推荐

  1. python sqlite

    1.导入Python SQLITE数据库模块 Python2.5之后,内置了SQLite3,成为了内置模块,这给我们省了安装的功夫,只需导入即可~ import sqlite3 2. 创建/打开数据库 ...

  2. Cannot format given Object as a Date

    这个小错挺有意思的,记录一下 导出Excel的时候,同事直接用 format …… 前提:数据库中该字段是 Timestamp ---- 2016-06-20 22:49:02.967 写个测试说明一 ...

  3. 开启无线WLAN方式

    1.以管理员身份运行命令提示符 因为下面的步骤必须在管理员权限下运行,因此我们从开始菜单找到"命令提示符",或直接键入cmd快速搜索,右键单击它,选择"以管理员身份运行& ...

  4. 微信小程序组件icon

    基础内容icon:官方文档 Demo Code Page({ data: { iconSize: [20, 30, 40, 50, 60, 70], iconColor: [ 'red', 'oran ...

  5. window下rails4.1 发生TZInfo::DataSourceNotFound 错误

    在官网上学习rails 4.1 ,启动rails server之后发生了如下错误 $ rails serverBooting WEBrickRails 4.1.0 application starti ...

  6. python2.7中的字符编码问题

    0. 写在前面 起因:之前写个数据预处理程序的时候遇到了点问题,用re模块的正则查找方法search时总是找不出来(找错了或者出乱码),于是捣鼓捣鼓. 经过:查资料,做实验,发现用utf8编码的str ...

  7. C# Winform DataGrid 绑定List<> Or ObservableCollection<> 类型无法自动刷新问题

    当DataGrid通过绑定List<> Or ObservableCollection<> 类型数据,通过INofityPropertyChanged接口通知数据改变进行刷新无 ...

  8. 【hihocoder】三十九周：二分.归并排序之逆序对

    就是用归并排序求数组中得逆序对.假设数组为a:[2 4 5],和b:[1 3],那么在这一次归并的时候逆序对这样求,belement表示当前result数组中b数组对应的元素个数,total表示逆序对 ...

  9. Android bluetooth介绍

    Android bluetooth介绍(一):基本概念及硬件接口Android bluetooth介绍(二): android 蓝牙代码架构及其uart 到rfcomm流程Android blueto ...

  10. 【Flask】Flask Session操作

    ### session:1. session的基本概念:session和cookie的作用有点类似,都是为了存储用户相关的信息.不同的是,cookie是存储在本地浏览器,session是一个思路.一个 ...