HTML学习笔记20——表单form (用户注册表)

表单:用户注册,在线报名……时,需要把用户的相关信息填写并提交,这时就需使用到表单来收集用户信息。

基本格式:

【action 用于控制提交的地方(默认为自己的页面,也可在其值定义其他的网站名),method(默认是将信息的内容直接显示在提交的页面网址上)当设置method=”post“时就不会将信息内容全部显示到提交的页面网址上】action控制往哪里发,method控制发送方式;

<form action=""    >

  <p>信息1</p>

  <p>信息2</p>

    ……

</form>

细项讲解:信息1&2……的基本格式有以下几种:【注:value的值是给后台的数据,name的值是用于给后台数据提供辨识名称】

  1.提示名:<input type="text" name="xxx"/>             //一般提示名为“用户名”时,用这种方式。

  2.提示名:<input type="password" name="xxx"/>            //一般提示名为“密码”时,用这种方式。

  3.提示名:<input type="radio" name="xxx" value="xxxx"/>      //一般提示名的类型为“单选”时,用这种方式。

  4.提示名:<input type="checkbox" name="xxx" value="xxxx"/>    //一般提示名的类型为“多选”时,用这种方式。

  5.提示名:<input type="file" name="xxx"/>             //一般提示名的类型为“文件域”时(如上传头像的功能),用这种方式。

  6.提示名:<select name="xxx" >                                                 //一般提示名的类型为“下拉框”时,用这种方式。

          <option value="xx">xx</option>

          <option value="xxx">xxx</option>

       </select>

  7.提示名:<textarea name="xxx">                                               //一般提示名的类型为“较大的文本编辑区域”时,用这种方式。

         内容

       </textarea>

  8.<input type="submit" value="提交"/>                //“提交”时,用这种方式。      

  type="hidden"时为隐藏;

表单的默认值:用户名的直接value=”xx“;

         需要选择(单选或多选)的表单,就写checked=”checked“;

         下拉框,需写selected=”selected“;

         textarea直接添加内容即可;

         文本域(如头像)是没有默认值的,为安全考虑;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>用户注册表</title>
 6 </head>
 7 <body>
 8     <form>
 9         <p>
10             用户名:<input type="text" name="name"/>
11         </p>
12         <p>
13             密码:<input type="password" name="password"/>
14         </p>
15         <p>
16             性别:男:<input type="radio" name="gender" value="男"/>
17                   女:<input type="radio" name="gender" value="女" checked="checked"/>
18         </p>
19         <p>
20             学历:<select name="学历">
21                 <option value="大学">大学</option>
22                 <option value="硕士">硕士</option>
23                 <option value="博士" selected="selected">博士</option>
24             </select>
25         </p>
26         <p>
27             头像:<input type="file" name="picture"/>
28         </p>
29         <p>
30             爱好:跑步:<input type="checkbox" name="hobby" value="跑步"/>
31                   篮球:<input type="checkbox" name="hobby" value="篮球"/>
32                   足球:<input type="checkbox" name="hobby" value="足球"/>
33                   台球:<input type="checkbox" name="hobby" value="台球"/>
34         </p>
35         <p>
36             个人简介:<br/>
37             <textarea name=“个人简介”> 个人简介需包含个人的性格,兴趣,特长等让大家更全面的认识你~ </textarea>
38         </p>
39         <p>
40             <input type="submit" value="提交"/>
41         </p>
42     </form>
43
44 </body>
45 </html>

效果图:

时间: 2024-08-05 11:12:36

HTML学习笔记20——表单form (用户注册表)的相关文章

HTML表格表单综合——用户注册表

今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo

struts2学习笔记(三)—— 在用户注册程序中使用验证框架

实现目标: 1.使用验证框架对用户注册信息进行验证 2.验证用户名.密码.邮箱不能为空 3.验证用户名.密码长度 4.验证邮件地址格式 具体实现 一.Struts2应用的基础配置 这里不做详细阐述,具体为web.xml.相关jar包的配置 二.将页面显示的文本内容放到资源文件中 1.查看用户注册程序中的所有页面,找到所有可以显示的文本内容,将它们分离出来放到资源文件中. 2.与相关的Action类同名,以.preperties为扩展名,与Action类位于同一个包中,只能由该Action访问 R

Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法

Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法 在上一篇笔记中我们介绍了Ext.Net的简单用法,并创建了一个简单的登录表单.今天我们将看一下如何更好是使用FormPanel,包括使用字段默认值.Checkbox Grouping和Radio Button Grouping等. 为FormPanel设置默认值 在Form中设置FieldDefaults标签可以设置字段属性的默认值.来看一下我们的用法: <FieldDefaults LabelWidth="60&q

HTML表单(Form)

HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息. 举个简单的例子,一个让用户输入姓名的HTML表单(Form).示例代码如下: <form action="http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get"> 请输入你的姓名: <input type="text" name="your

asp.net MVC中控制器获取表单form提交的数据之实体类数据

第一次写记录文章,难免有不足之处:欢迎指出. 1.新建一个mvc项目如: 2.新建一个Test.cs 注意get,set方法不能简写 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 using System; using System.Collections.Generic; using System.Linq; usi

ThinkPHP 学习笔记 ( 三 ) 数据库操作之数据表模型和基础模型 ( Model )

//TP 恶补ing... 一.定义数据表模型 1.模型映射 要测试数据库是否正常连接,最直接的办法就是在当前控制器中实例化数据表,然后使用 dump 函数输出,查看数据库的链接状态.代码: public function testdb(){ $obj=M("User"); dump($obj); } 此时浏览器输出: object(Model)#5 (20) { ["_extModel:private"] => NULL ["db:protecte

关于表单form元素中onsubmit事件处理机制的认识

博主目前处于Js学习的初期,遇到了很多问题,比如今天的关于表单form元素中onsubmit事件问题,根据教程所述,onsubmit事件是在表单提交的时候触发的,但是我看到教程上的onsubmit事件是这么写的 :onsubmit="return validateForm();",首先validateForm()已经有返回值了,为什么在这里还要加一个return??这让我百思不得其解,直到看到一篇博文才恍然大悟,受益匪浅,以下是这篇博文的出处:http://blog.163.com/h

HTML超文本标记语言(八)——表单&lt;form&gt;

一.表单<form>标签及其属性 HTML表单用于收集用户输入.基本格式如下: <form> . form elements . </form> 表单元素指不同类型的input元素.复选框.单选按钮.提交按钮等. 1.action属性:定义在提交表单时执行的动作,规定向何处提交表单的地址(URL)(提交页面). 通常,表单会被提交到web服务器上的网页.在如下例子中,指定了某个服务器脚本来处理被提交表单: <form action="action_pag

表单 - Form - EasyUI提供的表单异步提交

方案一 被提交的表单 <form id="loginForm" method="post"> <table align="center"> <tr> <th align="right">用户名</th> <td> <input type="text" name="username"/> </td&g