<!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. javascript把RGB指定颜色转换成十六进制颜色(Converting R,G,B values to HTML hex notation)

    Prologue 看见一篇非常好的外国文章,Making annoying rainbows in javascript,事实上我当时非常想把它翻译下来的,可是对于一个连六级都没过的人确实有点难度,一 ...

  2. php imagemagick库安装使用

    imagemagick介绍: ImageMagick® is a software suite to create, edit, compose, or convert bitmap images. ...

  3. oracle ORA-01704: string literal too long

    导出数据时,在SQL拼接处,提示 oracle ORA-01704: string literal too long sql:  WITH already_in AS (SELECT distinct ...

  4. vim批量注释与取消批量注释（转）

    方法一 块选择模式 插入注释: 用v进入virtual(可视化)模式(可以省略这一步) 用上下键选中需要注释的行数 按ctrl+v进入可视化块模式 按大写I进入插入模式,输入注释符‘#’或者是‘//’ ...

  5. jquery 获取checkbox 选中值并拼接字符集

    1.代码示例: var chk_value =[]; $('input[name="rewardids"]:checked').each(function(){   chk_val ...

  6. LeetCode：前K个高频单词【692】

    LeetCode:前K个高频单词[692] 题目描述 给一非空的单词列表,返回前 k 个出现次数最多的单词. 返回的答案应该按单词出现频率由高到低排序.如果不同的单词有相同出现频率,按字母顺序排序. ...

  7. POJ - 3662 Telephone Lines (Dijkstra+二分)

    题意:一张带权无向图中,有K条边可以免费修建.现在要修建一条从点1到点N的路,费用是除掉免费的K条边外,权值最大的那条边的值,求最小花费. 分析:假设存在一个临界值X,小于X的边全部免费,那么此时由大 ...

  8. MySQL-5.7 游标及DECLARE

    1.cursor游标 用来声明一个数据集 游标的声明必须在变量和条件声明之后,在handler声明之前 游标特性: 不灵敏:服务器可以或不复制其结果 只读:不可更新 不可滚动的:只能在一个方向上遍历, ...

  9. PHP 网站隔离配置

    PHP网站间隔离 网站内目录与目录之间是可以访问的,在某些特定情况下这样是不安全的,如果目录间网址权限被黑客利用很可能造成数据流失,在这里我们可以通过PHPopen_basedir来实现网站间目录隔离 ...

  10. COS-3OS的用户接口

    操作系统是用户和计算机的接口,同时也是计算机硬件和其他软件的接口.操作系统的功能包括管理计算机系统的硬件.软件及数据资源,控制程序运行,改善人机界面,为其它应用软件提供支持,让计算机系统所有资源最大限 ...