学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>HTML>>基础教程>>

HTML基础教程(十四) 表单

发布时间:2019-12-21点击:

    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标签的个数即可。

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

    小伙伴们,动手试试吧~!

赞一个(0)     踩一个(0)    

相关链接