表单项介绍

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6     </head>
  7     <body>
  8         <!--
  9             表单的作用就是用来将用户信息提交给服务器的
 10                 比如:百度的搜索框 注册 登录这些操作都需要填写表单
 11         -->
 12
 13
 14         <!--
 15             使用form标签创建一个表单
 16                 form标签中必须指定一个action属性,该属性指向的是一个服务器的地址
 17                 当我们提交表单时将会提交到action属性对应的地址
 18         -->
 19         <form action="target.html">
 20             <!--
 21                 使用form创建的仅仅是一个空白的表单,
 22                     我们还需要向form中添加不同的表单项
 23             -->
 24
 25             <!--
 26                 在表单中可以使用fieldset来为表单项进行分组,
 27                 可以将表单项中的同一组放到一个fieldset中
 28             -->
 29             <fieldset>
 30
 31                 <!-- 在fieldset可以使用legend子标签,来指定组名 -->
 32                 <legend>用户信息</legend>
 33
 34
 35                 <!--
 36                     使用input来创建一个文本框,它的type属性是text
 37                         如果希望表单项中的数据会提交到服务器中,还必须给表单项指定一个name属性
 38                         name表示提交内容的名字
 39
 40                     用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
 41                         url地址?查询字符串
 42                     格式:
 43                         属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值
 44                     在文本框中也可以指定value属性值,该值将会作为文本框的默认值显示
 45                 -->
 46                 <!--
 47                     在html中还为我们提供了一个标签,专门用来选中表单中的提示文字的
 48                     label标签
 49                     该标签可以指定一个for属性,该属性的值需要指定一个表单项的id值
 50                 -->
 51                 <label for="um">用户名</label>
 52                 <input id="um" type="text" name="username"  /> <br /><br />
 53
 54                 <!--
 55                     密码框
 56                         - 使用input创建一个密码框,它的type属性值是password
 57                 -->
 58                 <label for="pwd">密码 </label>
 59                 <input id="pwd" type="password" name="password" /> <br /><br />
 60             </fieldset>
 61
 62             <fieldset >
 63
 64                 <legend>用户爱好</legend>
 65
 66             <!--
 67                 单选按钮
 68                     - 使用input来创建一个单选按钮,它的type属性使用radio
 69                     - 单选按钮通过name属性进行分组,name属性相同是一组按钮
 70                     - 像这种需要用户选择但是不需要用户直接填写内容的表单项,
 71                         还必须指定一个value属性,这样被选中的表单项的value属性值将会最终提交给服务器
 72
 73                     如果希望在单选按钮或者是多选框中指定默认选中的选项,
 74                         则可以在希望选中的项中添加checked="checked"属性
 75             -->
 76             性别  <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
 77                 <input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label>
 78                 <br /><br />
 79
 80             <!--
 81                 多选框
 82                     - 使用input创建一个多选框,它的type属性使用checkbox
 83             -->
 84             爱好     <input type="checkbox" name="hobby" value="zq" />足球
 85                 <input type="checkbox" name="hobby" value="lq" />篮球
 86                 <input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
 87                 <input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
 88             <br /><br />
 89
 90             </fieldset>
 91
 92             <!--
 93                 下拉列表
 94                     - 使用select来创建一个下拉列表
 95                     下拉列表的name属性需要指定给select,而value属性需要指定给option
 96                     可以通过在option中添加selected="selected"来将选项设置为默认选中
 97
 98                     当为select添加一个multiple="multiple",则下拉列表变为一个多选的下拉列表
 99             -->
100             你喜欢的明星
101                 <select name="star">
102
103                     <!--
104                         在select中可以使用optgroup对选项进行分组
105                             同一个optgroup中的选项是一组
106                         可以通过label属性来指定分组的名字
107                     -->
108                     <optgroup label="女明星">
109                         <!-- 在下拉列表中使用option标签来创建一个一个列表项 -->
110                         <option value="fbb">范冰冰</option>
111                         <option value="lxr">林心如</option>
112                         <option value="zw">赵薇</option>
113                     </optgroup>
114
115                     <optgroup label="男明星">
116                         <option value="zbs" selected="selected">赵本山</option>
117                         <option value="ldh">刘德华</option>
118                         <option value="pcj">潘长江</option>
119                     </optgroup>
120
121                 </select>
122
123             <br /><br />
124
125             <!--
126                 使用textarea创建一个文本域
127             -->
128             自我介绍  <textarea name="info"></textarea>
129
130             <br /><br />
131
132             <!--
133                 提交按钮可以将表单中的信息提交给服务器
134                 使用input创建一个提交按钮,它的type属性值是submit
135                 在提交按钮中可以通过value属性来指定按钮上的文字
136             -->
137             <input type="submit" value="注册" />
138
139             <!--
140                 <input type="reset" />可以创建一个重置按钮,
141                     点击重置按钮以后表单中内容将会恢复为默认值
142             -->
143             <input type="reset" />
144
145             <!--
146                 使用input type=button可以用来创建一个单纯的按钮,
147                     这个按钮没有任何功能,只能被点击
148             -->
149             <input type="button" value="按钮" />
150
151             <!--
152                 除了使用input,也可以使用button标签来创建按钮
153                 这种方式和使用input类似,只不过由于它是成对出现的标签
154                     使用起来更加的灵活
155             -->
156             <br /><br />
157             <button type="submit">提交</button>
158             <button type="reset">重置</button>
159             <button type="button">按钮</button>
160
161         </form>
162     </body>
163 </html>

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><!-- 表单的作用就是用来将用户信息提交给服务器的比如:百度的搜索框 注册 登录这些操作都需要填写表单--><!--使用form标签创建一个表单form标签中必须指定一个action属性,该属性指向的是一个服务器的地址当我们提交表单时将会提交到action属性对应的地址--><form action="target.html"><!-- 使用form创建的仅仅是一个空白的表单,我们还需要向form中添加不同的表单项--><!-- 在表单中可以使用fieldset来为表单项进行分组,可以将表单项中的同一组放到一个fieldset中--><fieldset><!-- 在fieldset可以使用legend子标签,来指定组名 --><legend>用户信息</legend><!-- 使用input来创建一个文本框,它的type属性是text如果希望表单项中的数据会提交到服务器中,还必须给表单项指定一个name属性name表示提交内容的名字用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器url地址?查询字符串格式:属性名=属性值&属性名=属性值&属性名=属性值&属性名=属性值在文本框中也可以指定value属性值,该值将会作为文本框的默认值显示--><!-- 在html中还为我们提供了一个标签,专门用来选中表单中的提示文字的label标签该标签可以指定一个for属性,该属性的值需要指定一个表单项的id值--><label for="um">用户名</label><input id="um" type="text" name="username"  /> <br /><br /><!--密码框- 使用input创建一个密码框,它的type属性值是password--><label for="pwd">密码 </label><input id="pwd" type="password" name="password" /> <br /><br /></fieldset><fieldset ><legend>用户爱好</legend><!--单选按钮- 使用input来创建一个单选按钮,它的type属性使用radio- 单选按钮通过name属性进行分组,name属性相同是一组按钮- 像这种需要用户选择但是不需要用户直接填写内容的表单项,还必须指定一个value属性,这样被选中的表单项的value属性值将会最终提交给服务器如果希望在单选按钮或者是多选框中指定默认选中的选项,则可以在希望选中的项中添加checked="checked"属性-->性别  <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label><input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label> <br /><br /><!-- 多选框- 使用input创建一个多选框,它的type属性使用checkbox-->爱好<input type="checkbox" name="hobby" value="zq" />足球<input type="checkbox" name="hobby" value="lq" />篮球<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球<br /><br /></fieldset><!-- 下拉列表- 使用select来创建一个下拉列表下拉列表的name属性需要指定给select,而value属性需要指定给option可以通过在option中添加selected="selected"来将选项设置为默认选中当为select添加一个multiple="multiple",则下拉列表变为一个多选的下拉列表-->你喜欢的明星 <select name="star"><!-- 在select中可以使用optgroup对选项进行分组同一个optgroup中的选项是一组可以通过label属性来指定分组的名字--><optgroup label="女明星"><!-- 在下拉列表中使用option标签来创建一个一个列表项 --><option value="fbb">范冰冰</option><option value="lxr">林心如</option><option value="zw">赵薇</option></optgroup><optgroup label="男明星"><option value="zbs" selected="selected">赵本山</option><option value="ldh">刘德华</option><option value="pcj">潘长江</option></optgroup></select><br /><br /><!--使用textarea创建一个文本域-->自我介绍  <textarea name="info"></textarea><br /><br /><!-- 提交按钮可以将表单中的信息提交给服务器使用input创建一个提交按钮,它的type属性值是submit在提交按钮中可以通过value属性来指定按钮上的文字--><input type="submit" value="注册" /><!--<input type="reset" />可以创建一个重置按钮,点击重置按钮以后表单中内容将会恢复为默认值--><input type="reset" /><!-- 使用input type=button可以用来创建一个单纯的按钮,这个按钮没有任何功能,只能被点击--><input type="button" value="按钮" /><!--除了使用input,也可以使用button标签来创建按钮这种方式和使用input类似,只不过由于它是成对出现的标签使用起来更加的灵活--><br /><br /><button type="submit">提交</button><button type="reset">重置</button><button type="button">按钮</button></form></body></html>

时间: 2024-11-03 03:46:38

表单项介绍的相关文章

判断表单项内容为空后光标位于相应表单项

判断表单项内容为空后光标位于相应表单项:在进行表单验证的时候,一般都有这样的情况,如果一个表单项目没有通过验证的话,那么此表单项就会获得焦点,光标的位置也就会位于此表单项目中,下面就简单介绍一下如何实现次效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://w

SQL Server系统表sysobjects介绍与使用

原文:SQL Server系统表sysobjects介绍与使用 关于SQL Server数据库的一切信息都保存在它的系统表格里.我怀疑你是否花过比较多的时间来检查系统表格,因为你总是忙于用户表格.但是,你可能需要偶尔做一点不同寻常的事,例如数据库所有的触发器.你可以一个一个地检查表格,但是如果你有500个表格的话,这可能会消耗相当大的人工. 这就让sysobjects表格有了用武之地.虽然我不建议你更新这个表格,但是你当然有权对其进行审查. sysobjects 表 在数据库内创建的每个对象(约

PHP实现单击“添加”按钮增加一行表单项,并将所有内容插入到数据库中

PHP实现单击“添加”按钮增加一行表单项,并将所有内容插入到数据库中 效果图: html+jquery: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script language="javascript" type="text/javascript" src=&qu

表单(二)多个表单项的动态校验总结

任务目的 加强对JavaScript的掌握 熟悉常用表单处理逻辑 任务描述 如示例图中所示,基于上一个任务,在页面中添加多个表单 要求: 表单获得焦点时,下方显示表单填写规则 表单失去焦点时校验表单内容 校验结果正确时,表单边框显示绿色,并在下方显示验证通过的描述文字 校验结果错误时,表单边框显示红色,并在下方显示验证错误的描述文字 点击提交按钮时,对页面中所有输入进行校验,校验结果显示方式同上.若所有表单校验通过,弹窗显示"提交成功",否则显示"提交失败" 任务注

Easyui 判断某个Div 里的表单项是否验证通过.

var isValid = $("#divId").Form("validate"); if( isValid ){ alert("验证通过"); } else{ alert("验证失败"); } Easyui 判断某个Div 里的表单项是否验证通过.,码迷,mamicode.com

SQL Server系统表sysobjects介绍与使用(转)

SQL Server系统表sysobjects介绍与使用 关于SQL Server数据库的一切信息都保存在它的系统表格里.我怀疑你是否花过比较多的时间来检查系统表格,因为你总是忙于用户表格.但是,你可能需要偶尔做一点不同寻常的事,例如数据库所有的触发器.你可以一个一个地检查表格,但是如果你有500个表格的话,这可能会消耗相当大的人工. 这就让sysobjects表格有了用武之地.虽然我不建议你更新这个表格,但是你当然有权对其进行审查. sysobjects 表  在数据库内创建的每个对象(约束.

【jQuery】无须id、name与class等属性,直接对表单中的所有表单项进行遍历、判断、检验

虽然看上去好像很爽的样子,尤其在一些具有超过单行文本框<input type="text" />.多行文本框<textarea>等页面,但是,遇到一些需要特定判断的页面,你还不如设置一个id,直接通过id来取,简单方便,不用考虑遍历问题这么艰难.这种方法只是尤其使用于那些超多文本框的页面,但你又不想连用服务器语言什么aspx,jsp,php设置N个id的情况.例如,利用这个方法能够改进<[JavaScript]表单提交之前的前台处理检查三部曲>(点击

JQuery EasyUI 动态改变表单项的验证守则

//JQuery EasyUI 动态改变表单项的验证规则 $(document).ready(function(){ $('#FILE_QUALITY').combobox({ onChange:function(newValue,oldValue){ if(newValue == 2){ $('#FRONT_FOR_UNIT').validatebox({ required: false }); } else if(newValue == 0){ $('#FRONT_FOR_UNIT').va

SQL Server系统表sysobjects介绍

SQL Server系统表sysobjects 介绍 sysobjects 表结构: 列名 数据类型 描述 name sysname 对象名,常用列 id int 对象标识号 xtype char(2) 对象类型.常用列.xtype可以是下列对象类型中的一种: C = CHECK 约束 D = 默认值或 DEFAULT 约束 F = FOREIGN KEY 约束 L = 日志 FN = 标量函数 IF = 内嵌表函数  P = 存储过程  PK = PRIMARY KEY 约束(类型是 K)