HTML学习之表单

HTML表单

表单是HTML的一个重要部分,主要用于采集和提交用户输入的信息。

<form   name=“f1”     action=“处理表单用的URL”       method=“get或post” >

</form>

1、name:   设置表单的名称。

2、action:  设置表单的处理程序的URL。

3、method:提交表单的方法。

HTML    表单中常用的标记:

输入域<input>一般在表单中使用

1、<inputtype=“text” />输入单行文字

2、<inputtype=“password”/>输入密码

3、<inputtype=“radio” />单选按钮

4、<inputtype=“checkbox” />多选按钮

5、<inputtype=“image” />图片

6、<inputtype=“file” />文件上传

7、<inputtype=“hidden” />隐藏域

8、<inputtype=“reset” />撤销按钮

9、<inputtype="submit" />提交按钮

10、<inputtype=“button” />普通按钮

11、多行文本输入标记<textarea>

<textarea name=“t1”,rows=x,cols=x>…

</textarea>

name 设置识别名称。

rows设置文本域的行数

cols设置文本域的列数

disabled设置文本为禁用

warp 设置为off不换行

12、选择域<select>

<select name=selectname>

<option selected>选项一</option>

< option >选项二</option>

……

</select>

<!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body >
   <marquee direction="right" behavior="alternate" bgcolor="#3333FF">
   hello,great boy.......
   </marquee>
   <hr>
   <form>
   	输入单行文字 <input type="text" /><br>
   	输入密码     <input type="password" /><br>
   	单选按钮     <input type="radio" name="abc" />  <input type="radio"  name="abc" /> <br>
   	多选按钮     <input type="checkbox"  name="ab"/><input type="checkbox" name="ab"/> <br>
   	图片域       <input type="image" src="29.gif" /><br>
   	文件上传     <input type="file" /> <br>
   	隐藏域       <input type="hidden" /><br>
   	撤销按钮     <input type="reset" value="撤销按钮" /> <br>
   	提交按钮     <input type="submit"  value="提交按钮" /> <br>
   	执行脚本     <input type="button"  value="普通按钮" onclick="prompt() " /> <br>

   	<textarea name="t1" rows="4" cols="50">
   		文本域
   	</textarea>
   	<br>
   	<hr>
   	<select name="selectname">
   	<option>中国</option>
   	<option selected="selected">美国</option>
   	<option>日本</option>
   	</select>
   </form>

</html>

HTML表单提交数据:html提交数据时必须设置<input>标签name和value属性,以便asp程序能获取相应的值。

<!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>
    <body >
     <form  name="form1" action="request.asp" method="post">
     <p>
     请输入用户名: <input name="name" type="text" size="10"  maxlength="7" />
     <br>

     请输入密码:
     <input  name="password" type="password" size="10" maxlength="6"/>
     <br>
     选择强项:<br>
     体育<input type="checkbox"  name="ck"   value="体育" />
     音乐<input type="checkbox"  name="ck"   value="音乐" />
     跳舞<input type="checkbox"  name="ck"   value="跳舞" />
     <br>
     性别:<br>
     男<input type="radio"  name="sex"  value="男"  checked="checked" /> 女<input type="radio" name="sex" value="女" />
     <br>

     <select name="sn">
     <option selected="selected"> 中国</option>
     <option>美国</option>
     <option>韩国</option>
     </select>
     <br>

     <input name="确定"  type="submit" id="确定"  value="提交" />
     <input name="重置"  type="reset" value="重置">      

     <p>

     </form>
    </body> 

</html>
时间: 2024-10-25 10:57:22

HTML学习之表单的相关文章

bootstrap基础学习【表单含按钮】(二)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[表单](二)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body style="padd

Knockout学习之表单绑定器(上)

表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然其他可见的dom元素也是一样可以的.下面我们就简单的举一个例子: 1 <div> 2 你已经点击了<span data-bind="text:numberOfClicks" ></span> 3 <button data-bind="cl

Knockout学习之表单绑定器(下)

“hasFocus”绑定 hasFocus绑定器会将DOM元素的焦点状态与视图模型中的属性相关联,当你设置视图模型中关联的属性为true或false后,将能够设置关键的DOM元素是否获得焦点. 比如下面的例子将会演示如何使用通过代码设置焦点,并且当关联的标签获得焦点后显示一段文本: 1 <div> 2 <input type="text" data-bind="hasfocus: focusState" /> 3 <button typ

Django学习之表单(forms)

我们的博客现在已经实现了博客列表的查看,博客的查看.现在该是我们实现创建和更新博客的时候了. 要实现博客的创建和更新,我们需要学习Django表单的相关知识. 在处理表单的过程中,Django表单功能做了哪些工作呢? 传递数据的准备和重建 为数据创建HTML表单 从客户端接收和处理提交的表单和数据 Django Form类是系统的核心组件.在django中, 模型描述的是一个对象的逻辑架构,这绵行为,它显现给我们的方式.与此类似,Form类描述的是一个表单和决定它是如何工作和显示的. 一个模型类

[html5] 学习笔记-表单新增的元素与属性(续)

本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indeterminate属性.Image提交按钮的宽高属性. 1.controls属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的controls属性来访问该表单元素. 1 <body> 2 <script> 3 function setValue(){ 4 var label

[jQuery学习系列五 ]5-Jquery学习五-表单验证

前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开始到jQuery的表单验证.这里的表单验证都是最简单最基础的方式去完成,当然jQuery还有一些比较好的验证框架,这里就不提及了. 一,字段验证:1.1 字段非空 <form action="" method="post" id ="myform&quo

BootStrap学习之表单

本文和大家分享的主要是BootStrap的表单相关内容,一起来看看吧,希望对大家学习BootStrap有所帮助. 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control 类的 <input> . <textarea> 和 <select>元素都将被默认设置宽度属性为 width: 100% ;. 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列. 基本实例: <div class='container

学习W3CSCHOOL 表单验证

1 //表单学习笔记 2 //建立一张表单的验证 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 7 <title>表单验证</title> 8 </head> 9 <body> 10 <?php 11

[html5] 学习笔记-表单新增元素与属性

本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.form属性 在html4中,表单内的从属元素必须书写在表单内部,而在html5中,可以把他们书写在页面上任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以指定该元素从属于指定表单了. 以往的写法: 1 <body> 2 <form id="testform&q

Bootstrap学习(2)--表单

Bootstrap里的role属性,增强标签的语义化,提高识别力,  如:<form role="form"> input.select.textarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有