2008年7月31日星期四

Html学习日记7

表单



列表完了以后又是表单,复杂呀~

首先是一个例子:

姓:



名:



这是一个无序列表。。。。

它的源码是这样的:

<form>

姓:

<input type="text" name="xing">

<br>

名:

<input type="text" name="ming">

</form>



再看一个例子~

用户名:



密  码:



这是一个包含密码输入框的表单。

它的源码是:

<form>

用户名:

<input type="text" name="user">

<br>

密码:

<input type="password" name="password">

</form>

看了这两个例子,大致可以看出表单就是文字输入的框框。。。

但是它竟然起了表单这个生涩的名字。。。

表单



表单是一个能够包含表单元素的区域。表单元素是能够让用户在表单中输入信息的元素(比如文本框,密码框,下拉菜单,单选框,复选框等等)。

表单是用
元素定义的。

从上面的几个例子中就可以看出来。。。


下面是几种常用的命令及表单形式。

Input



最常用的表单标签是<input>标签。Input的类型用type属性指定。最常用的input类型解释如下:

文本框



在表单中,文本框用来让用户输入字母、数字等等。

例子是上面的第一个。。。

单选按钮



就像下面的那样:





源码是这样的:

<form>

<input type="radio" name="sex" value="male">男

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

</form>

复选框



也是像下面这样。。。


我是一个学生



我不是一个学生


源代码是下面这样:

<form>

<input type="checkbox" name=”xs">

我是一个学生

<br>

<input type="checkbox" name="fxs">

我不是一个学生

</form>

表单的action属性和提交按钮



当用户点击提交按钮的时候,表单的内容会被提交到其他文件。表单的action属性定义了所要提交到的目的文件,该目的文件收到信息后通常进行相关的处理。

例子是这样的:

你的邮件:




源代码如下:

<form name="input" action="http://sparkzee.blogspot.com" method="get">

你的邮件:

<input type="text" name="EM">

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

</form>

更多事例及用法

简单的下拉列表:






代码如下:

<form>

<select name="sex">

<option value="m">男士

<option value="w">女士

<option value="MI">中性

<option value="HX">火星人

<option value=”wx”>外星人

</select>

</form>

预选的下拉列表:






它默认选择了火星人。。。

<form>

<select name="sex">

<option value="m">男士

<option value="w">女士

<option value="MI">中性

<option value="HX" selected>火星人

<option value=”wx”>外星人

</select>

</form>

文本域:





源代码是。。。

<textarea rows="10" cols="40">

The cat was playing in the garden.

</textarea>

创建按钮:






代码如下:

<form>

<input type="button" value="Hello world!">

</form>

</body>

数据周围的标题边框:




健康信息:

身高
体重


代码如下:

<fieldset>

<legend>

健康信息:

</legend>

<form>

身高<input type="text" size="3">

体重<input type="text" size="3">

</form>

</fieldset>

含有文本框和提交按钮的表单:



请输入你的姓:


请输入你的名:






源代码如下:

<form name="input" action="http://sparkzee.blogspot.com" method="get">

请输入你的姓:

<input type="text" name="x" value="Mickey">

<br>请输入你的名:

<input type="text" name="m" value="Mouse">

<br>

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

</form>

含有单选按钮的表单



男士:



女士:






代码是这样的:

<form name="input" action="http://sparkzee.blogspot.com" method="get">

男士:

<input type="radio" name="Sex" value="Male" checked>

<br>

女士:

<input type="radio" name="Sex" value="Female">

<br>

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

</form>

从表单发送电子邮件:



这个表单将发一个电子邮件给我.

Name:




Mail:




Comment:









代码是这样的。。。

<form action="MAILTO:lohnzhang@gmail.com" method="post" enctype="text/plain">

<h3>这个表单将发一个电子邮件给我.</h3>

Name:<br>

<input type="text" name="name" value="你的姓名" size="20">

<br>

Mail:<br>

<input type="text" name="mail" value="你的油箱" size="20">

<br>

Comment:<br>

<input type="text" name="comment" value="想要写的内容" size="40">

<br><br>

<input type="submit" value="发送">

<input type="reset" value="重写">

</form>

我的推荐