首页>>网站建设>>Javascript>>经验笔记

HTML表单

在HTML文本中，表单主要是用来与用户互动的区域，比如说，输入框、标签、文本域、按钮等，都是表单的标签内容，这节课我们将来浅谈一下表单的用法.

一、表单的定义

<form>
.
表单元素
.
</form>

在表单的使用中，所有的表单元素（或者叫标签）均要放在form中，当然也有例外（不推荐使用）。

二、文本域（明文输入框）

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

其中输入框使用input标签来定义的，但是得注意，其中type属性是text，顾名思义，就是文本。

样式如下：



三、密码框（密文输入框）

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

其中type为password。密码框是用来给用户输入密码用的，当我们在其中输入文字或者数字时，不会直接显示，会显示星号等来代替，保密。

样式如下：



四、单选按钮

<input type="radio" name="age" value="male">25

其中type为radio，这里有一个需要注意的事项，就是单选按钮一般成组出现，当我们选中其中一个的时候，其他的将会取消，我们同时只能选中一个按钮，那么这里是怎么做到的呢？很简单，就是给单选按钮分组，同一组只能选中一个，分组用的属性是name,我们只要将一组的单选按钮name属性设置成一样即可。

实例代码：

<input type="radio" name="age">25<br>
<input type="radio" name="age">26

效果如下：



五、复选框

<input type="checkbox" name="mihu" value="">显示名称

复选框的type为checkbox，复选框可以同时选中N个，不受限制呦~。

样式如下：



六、按钮

<input type="button" value="按钮名称">

按钮的type为button，样式如下：



按钮也可以一下代码来定义

<button>按钮名称</button>

七、标签

<label>标签</label>

标签的定义时label，显示和正常文本没什么区别，这个标签主要用来给其中的文字定义样式的。

八、下拉框

下拉框的定义的如下：

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

其中大的闭合标签是select，其中option标签是下拉框中的选项，上述代码显示如下：



发现了吗，下拉框中所可以选的选项就是代码中option标签中定义的文本，如果你想增加选项个数，只需要添加option标签的个数即可。

以上内容是表单的基础用法，还有很多属性以及样式这里因为篇幅有限就不写了，后面会开专篇介绍的。

小伙伴们，动手试试吧~！