在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标签的个数即可。
以上内容是表单的基础用法,还有很多属性以及样式这里因为篇幅有限就不写了,后面会开专篇介绍的。
小伙伴们,动手试试吧~!
HTML2020-04-02
Javascript2020-04-04
Javascript2020-05-26
python2019-11-08
HTML2020-04-03
电脑2020-10-06