<!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. 汉澳sinox2014没有黑屏，一个能够依靠的安全避风港

    首先汉澳sinox2014没有验证server,根本就没办法区分正版和盗版 其次汉澳sinox2014安装也没有系列号cdkey等东西,直接安装无干扰 最后汉澳sinox2014不会有黑屏这样的东西. ...

  2. 访问hdfs里的文件

    准备工作: 给hdfs里上传一份用于测试的文件 [root@master ~]# cat hello.txt hello 1 hello 2 hello 3 hello 4 [root@master ...

  3. $git学习总结系列（4）——gitignore文件

    有时候工作区中会有我们创建的一些密码配置文件,或者自动生成的一些临时文件,比如python代码编译产生的.pyc文件和java代码编译产生的.class文件等,我们在提交代码的时候没有必要把这些文件也 ...

  4. netty1---传统IO和NIO的区别

    传统IO: package OIO; import java.io.IOException; import java.io.InputStream; import java.net.ServerSoc ...

  5. Web安全学习笔记之HTTP协议

    HTTP是一个应用层协议,主要用于Web开发,通常由HTTP客户端发起一个请求,创建一个到服务器指定端口(默认是80端口)的TCP连接.HTTP服务器则在那个端口监听客户端的请求.一旦收到请求,服务器 ...

  6. FIFO设计验证经验谈

    概述: FIFO是电路设计中非常重要的一个基本电路.一般的超大规模集成电路中,都会用到FIFO.所以,FIFO是每个SOC设计和验证工程师必须掌握的一种核心电路. FIFO电路又分为异步FIFO和同步 ...

  7. HTML5抽奖转盘

    在线演示 本地下载

  8. 20145201《Java程序设计》第五次实验报告

    实验五 Java网络编程及安全 实验内容 1．掌握Socket程序的编写: 2．掌握密码技术的使用: 3．设计安全传输系统. 我负责客户端 组队队员:鄢曼君20145227负责服务器 博客地址:htt ...

  9. 《Pro Git》第1章 起步

    关于版本控制 什么是版本控制:记录文件内容变化,将来可查阅特定版本修订情况的系统. 版本控制演进 1)本地版本控制系统 2)集中化的版本控制系统(Centralized Version Control ...

  10. Python 类的三大特性的综合运用 案例

    # --------------------- 类的三大特性的综合运用 案例 ------------------------- # 定义三个类:小狗,小猫,人 # 小狗:姓名,年龄(默认1岁) 吃饭 ...