基础表单结构：

<body>

　　<h1>

　　<hr />

　　<form action="" name="myFrom" enctype="multipart/form-data >

　　　　<input type="text" name="unname" /><br/>

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

　　　　<input type='submit" value="提交" />

　　</form>

</body>

{form表单的属性}

　　action=“URL”：一个URL地址：指定form表单向何处发送数据。

.它里面放一个路径，我们在代码编辑器中写form是总会自带着它，<form action="">.

.就是我们表单提交到服务器需要一段程序来处理，那有哪个程序处理就可以在action中指定，如果我是注册，可以由注册的程序来处理，登录由登录的程序来处理

　　name作用是给表单起名，为了便于我们操作，一个页面不止一个表单好用来区分

<form name="regFrm">通常我们给表单起名这样起：reg是这个表单是干什么的（reg注册）后面以Frm结尾，就是form的缩写。

　   enctype=“string”：规定在发送表单之前，如何对表单数据进行编码。通常在使用文件上传时，我们会写enctype=“multipart/form-data”，以二进制传输。

　　method=“get/post”：指定表单以何种方式发送到指定的服务器程序最常用的是个头和post。

表单元素：

。单行文本框<input type="text" />默认值是type=“text”

。密码框<input type="password" />

。单选按钮<input type="radio" />例子：

写作业了：<input type="radio" checked="checked" name="gender" value="male" /><br />

没写作业：<input type="radio" name="gender" value="female">

　　checked属性，默认选中当前的单选按钮，name是命名，value值是提交给后台程序看的。“相同的名字会把radio分为一组，一组radio只能选择一个。”名字相同即为一组让这一组radio产生关联用name。

。复选框<input type="checkbox" />

和单选按钮差不多

。隐藏域<input type="hidden" />

。文件上传<input type="file" />

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

　　　　<input type="file" name="file1" />

　　</form>

。下拉框<select>标签<select><option value="1">北京</option></select>

。多行文本框<textarea></taxtarea>

。标签<lable></lable>为input元素定义标注。

label本身不会有特殊效果，但它和其他input标签使用可以提升用户的使用体验，用户不用非得点击到按钮，而是点击文字即可选中。<label>虽然和input进行了关联，但是提交的依然是value的值，label中的内容不会被提交。label标签一般和radio、CheckBox类型一起使用。

<form>

　　<label for="male">Male</label>

　　<input type="radio" name="sex" id="male" />

</form>

。元素集<fieldset></fieldset>

。提交按钮<input type="submit" />

。普通按钮<input type="button" />

。重置按钮<input type="reset" />

练习：

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title></title>
</head>
<body>
　　<form action="" name="lainxiForm" enctype="multipart/form-data" method="get">
　　账号：<input type="text" name="noname" />
　　密码：<input type="password" name="pwd" />
　　　　   <input type="submit" value="提交"/>
　　<!--(单选有无name都可以)-->
　　</form><hr />
　　<form action="" name="forName" method="get">你喜欢什么：
　　　　<label for="juhua">菊花</label><input type="radio" name="lianxi" checked="checked" id="juhua"value=""/>
　　　　<label for="kuihua">葵花</label><input type="radio" name="lianxi" id="kuihua" value=""/>
　　　　<!--value值要传送到后台服务器，需要后台人员告诉你-->
　　　　<!--复选框需要name联系在一起-->
　　　　<input type="submit" value="提交"/>
　　</form>
　　<hr />
　　<form>
　　　　你的爱好是：
　　　　睡觉<input type="checkbox" name="hobby"/>
　　　　吃<input type="checkbox" name="hobby" />
　　　　写代码<input type="checkbox" name="hobby" checked="checked"/>
　　　　<input type="submit" />
</form>
</body>
</html>

表单form的属性，单行文本框、密码框、单选多选按钮的更多相关文章

  1. HTML（七）HTML 表单(form元素介绍，input元素的常用type类型，input元素的常用属性)

    前言 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input> ...

  2. Js document.frmLogin.action = '/login.htm';的意义和form表单的target属性

    一.解答:就是把 这个id名为frmLogin的form的提交地址改为上面的/login.htm <form id="frmLogin" name="frmLogi ...

  3. HTML ------ 关于表单 Form

    Form(表单)主要用于采集和提交用户输入的信息,是页面与WEB服务器交互过程中 最重要的信息来源. 掌握表单(Form)有以下几个要点: 重要form属性 form常用控件 form提交方式 § 重 ...

  4. amazeui学习笔记--css（HTML元素3）--表单Form

    amazeui学习笔记--css(HTML元素3)--表单Form 一.总结 1.form样式使用:在容器上添加 .am-form class,容器里的子元素才会应用 Amaze UI 定义的样式. ...

  5. 前端与后台可能需要使用交互的表单form，input标签

    前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form ...

  6. HTML中的表单<form>标签

    一.HTML表单 HTML 表单用于搜集不同类型的用户输入. HTML 表单包含表单元素,表单元素指的是不同类型的 input 元素.复选框.单选按钮.提交按钮等等. 关于表单的更多内容可以参考htt ...

  7. 3、网页制作Dreamweaver（表单form）

    表单form (虚线不显示) 1.写法: <form id="form1" name="form1" method="post" ac ...

  8. 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值

    一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...

  9. html - 表单form

    一.表单 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.select. ...

随机推荐

  1. AJAX 简介

    什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  2. 初始Hibernate框架技术

    hibernate: 定义:ORM:Object Relational Mapping 对象 关系 映射 使用hibernate时几个必要的: 1.实体类 2.映射文件(类  -数据库表,属性-字段) ...

  3. javascript中怎么让一个页面执行多个window.onload？

    我们都知道在javascript中window.onload 只能有一个如果有多个的话后面的会覆盖前面的,今天我们来看看怎么让一个页面执行多个window.onload <script type ...

  4. iOS - UIProgressView

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UIProgressView : UIView <NSCoding> @available(iOS 2. ...

  5. 如何设置DIV水平、垂直居中

    一.水平居中 需要设置两点: 1  设置DIV 的width属性即宽度. 2  设置div的margin-left和margin-right属性即可 代码: <div style="w ...

  6. mysql使用笔记（二）

    一.启动和关闭mysql服务 windows下 启动 (方法1)管理员权限进入cmd,执行 net start mysql (方法2)管理员权限进入cmd,执行 mysqld -uroot --con ...

  7. JavaScript设计模式与开发实践 - 观察者模式

    概述 观察者模式又叫发布 - 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做 ...

  8. 使用Beanstalkd_console

    作用:可以将 beanstalkd 的队列信息展示在图形化的操作界面一样,这样不仅给我么查看队列信息有很大的帮助,也可以形象地理解队列任务具体内容 使用操作:(前提条件是前面的队列能正常执行,) 首先 ...

  9. DOM中元素节点、属性节点、文本节点

    DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是 ...

  10. js对字符串函数之charAt()

    var str="012345"; 字符串下标的index从0开始: charAt(index)返回指定位置的字符如果index不在0-str.length之间,返回一个空字符串: ...