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>

文本域：

<br /> The cat was playing in the garden.<br />

源代码是。。。

<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>