所谓表单,就是你看到的各种由用户填写的框框。这就是表单了。

表单的标签是form,务必注意下这个单词,经常新手同学们会不小心写成from,这肯定是不对的了。

<form>

</form>

有了form标签后,其他的标签,就都要写在它里面了。

文本框与密码框

先来学习两个最常见的表单。

<form>
    用户名(文本框):<input type="text">
    <br>
    密码(密码框):<input type="password">
    <br>
</form>

它们两个都是input开始,区别是type,也就是类型不同。那实际访问一下,我们填写点内容,第一个文本框填写的内容,会直接显示给用户看。而密码框,输入的内容是不能让用户看见的,所以显示的都是小圆点了。

单选

<form>
    <!-- ... -->

    性别(单选按钮):
    <input type="radio"><input type="radio"><br />  
</form>

单选依然是input标签,不同的是type变成了radio,但是这里radio可不是收音机的意思咯,它就是单选。好我们来点击一下试试,发现并没有实现单选的效果。原因是这里少了一个属性,我们分别给它们加上一个name="sex",注意这里的name,也就是它们的名字,必须是相同的。这样浏览器就认为它们两是一组标签了。刷新后,再来点击试试,果然这就实现了单选。

<form>
    <!-- ... -->

    性别(单选按钮):
    <input type="radio" name="sex"><input type="radio" name="sex"><br />  
</form>

复选框

复选框的意思,当然就是可以选择多记录了,它的显示和刚才的单选有点点不一样。这里是小方框,而单选是圆形的框。

<form>
    <!-- ... -->

    爱好(复选框):
    <input type="checkbox" >音乐
    <input type="checkbox">艺术
    <input type="checkbox">电脑    
    <br>
</form>

下拉列表

这个下拉列表,就和刚才我们所有学习的表单有些不同了。它不是input标签哦,而是select标签。 其中每一个选项,都要用option标签包起来。

<form>
    <!-- ... -->

    国籍(下拉列表):
    <select>
        <option>中国</option>
        <option>美国</option>
        <option>澳大利亚</option>
        <option>加拿大</option>
    </select>
    <br />
</form>

文本域

有些时候,需要填写比较多的内容,这时候再用刚才学的文本框就无法实现了。那么就需要这个textarea标签了

<form>
    <!-- ... -->

    个性签名(文本域):
    <textarea rows="10" cols="30" ></textarea>    
    <br />
</form>

提交、重置按钮

最后要学习的是两个按钮,一个是提交按钮,type是submit,另一个重置按钮的type是reset。 当点击提交按钮后,所有表单中的内容,就会提交给后端程序了。我们现在还没学到那一步,所以先不要点击提交了,现在就算点了也看不到啥效果的。 重置按钮的作用很简单,当你填写内容后,点击它,所有表单的内容,都恢复原状了。

<form>
    <!-- ... -->

    <input type="submit" value="提交按钮">
    <input type="reset" value="重置按钮">
</form>

HTML所有常用的标签也就是这么多了,是不是真的不难啊?基本你只要多写个几遍,都能很容易掌握了。我们下一节,学习下正确的HTML书写格式的问题。