昨天因为晚上有事情，未更新，但是今天中午发也不晚，因为是同一天只是时间早晚而已，因此今日傍晚还将更新一次，废话不多说。

1.表单的综合练习，我们要创建一个综合的注册页面。运用到我们前面所学的所有知识。

我们整理一下思路​：

首先练习了账号密码的输入，属性为text为文本框，属性为password的为暗文文本框输入​

第二，单选框输入属性为radio，默认选择选项checked属性为checked，不同选项之间互斥为name属性的值必须相等​。多选框输入属性为checkbox。

第三，输入框为textarea标签，里面rows属性定义最多行，cols属性定义最多列​。

第四，属性值为date代表日历，属性为email代表为邮箱（必包含@），属性为number，代表本框只能输入数字​，属性为submit,代表提交信息到指定系统，属性值为reset代表重新提交信息，其中submit和reset中还可以有value属性来定义这个按钮的名称。button属性来添加按钮。

第五，传输信息有两个要点：

（1）form标签中action属性值必包含传输信息到系统的名称

（2）利用name属性来提示会有哪些值被传入到了我们的目的地，其中有一点就是单选框和多选款，可以通过在加入value属性来说明传入的值​。只有button属性的不能传入值

第六、在form标签后面紧跟field标签来指定表单区域，后面紧跟legend代表表单的​标题。

 
   

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>d50&51_form_exercise</title>

</head>

<body>

<form
action="www.baidu.com">

<fieldset>

<legend>注册界面</legend>

账号：<input type="text" id="d1"
name="account">

<br>

密码：<input type="password" id="d2"
name="password">

<br>

性别：  <input
type="radio" name="gender" value="male">男

<input type="radio" name="gender"
value="female">女

<input type="radio" name="gender"
checked="checked" value="screct">保密

<br>

爱好：  <input
type="checkbox" checked="checked" name="hobby"
value="basketball">篮球

<input type="checkbox" name="hobby"
value="message">按摩

<input type="checkbox" name="hobby"
value="run">跑步

<input type="checkbox" name="hobby"
value="bungee jumping">蹦极

<input type="checkbox" name="hobby"
value="hit on a girl">撩妹

<br>

简介：

<textarea cols="30" rows="10" name="description"></textarea>

<br>

生日：<input type="date" name="birthday">

<br>

邮箱： <input type="email" name="mail">

<br>

移动电话： <input type="number" name="phoneNumber">

<br>

<input type="submit" 
value="马上注册">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset" value="清空所有信息">

<br>

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

</fieldset>

</form>

​

</body>

</html>

二、源码

d50&51_form_exercise

地址：https://github.com/ruigege66/HTML_learning/blob/master/d50%2651_form_exercise

欢迎关注微信公众号：傅里叶变换

HTML连载7-表单练习的更多相关文章

  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弹出测 ...

  10. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

随机推荐

  1. 一组西门子S7 报文

    03 00 00 16 11 E0 00 00 00 01 00 C1 02 10 00 C2 02 03 01 C0 01 0A(第一次握手报文) 03 00 00 16 11 D0 00 01 0 ...

  2. PHP中的加密方式有如下几种

    1. MD5加密 string md5 ( string $str [, bool $raw_output = false ] ) 参数 str  --  原始字符串. raw_output  --  ...

  3. go 工具链目前[不支持编译 windows 下的动态链接库][1]，不过[支持静态链接库][2]

    go 工具链目前[不支持编译 windows 下的动态链接库][1],不过[支持静态链接库][2].想要产生dll,可以这样 workaround ,参考 golang ［issuse#11058][ ...

  4. Notepad++ 自定义关键字

    Notepad++是一款輕便好用的編輯器,但可能有些語言的關鍵字不全,比方SQL中,默認關鍵字沒有Merge. 怎样給Notepad++中的語言添加關鍵字,而不是大動干戈自定義一個語言? 步驟: Se ...

  5. java线：辛格尔顿隐藏ThreadLocal实现线程数据共享

    效果图分享: A和B需要共享同一线程,还有一组的相同A和B共享还有一组线程,两组相互之间不受影响. 代码: package cn.itcast.lesson6; import java.util.Ra ...

  6. C++学习笔记27,虚函数作品

    C++它指定虚函数的行为,但实现的作者编译器. 通常,编译器处理虚函数的方法是给每个对象加入一个隐藏成员.隐藏成员中保存了一个指向函数地址数组的指针. 这个数组称为虚函数表(virtual funct ...

  7. [ 转]Node.js模块 require和 exports

    什么是模块? node.js通过实现CommonJS的Modules/1.0标准引入了模块(module)概念,模块是Node.js的基本组成部分.一个node.js文件就是一个模块,也就是说文件和模 ...

  8. 创建 DLL 步骤 和 SRC

    LIBRARY SimulationTouchDll EXPORTS MouseControl GetPosition //MouseControlInterface.def 文件 #pragma o ...

  9. 基于IdentityServer4的单点登录——项目基本结构与流程

    组成 IdentityServer,Api和Client(客户端,asp .net core)本文以官方demo:https://github.com/IdentityServer/IdentityS ...

  10. sql 从未连续的Id中选择10~30条数据

    select * from(select *,row_number()over(order by ProductID) as num from Products) as t where t.num&g ...