表单标签
网页(程序)如果要和用户产生互动,则必须借助一定的中介,这个中介一般是:文本输入框、按钮、多选框、单选框。而表单则是这些中介和放置这些中介的空间(<form action=”” methon=””></form>)。
在网页中,这些文本输入框、按钮等等必须放置在由<form></form>这个标签所定义的空间中,否则没有实际意义。所以,由<form></form>标签所定义的空间就是表单存在的空间。
【各种输入类型】
文字输入框:每个表单之所以会有不同的类型,原因就在于type="表单类型"设定的不同而已,我们就先来看看第一个类型:文字输入列。文字输入列的形态就是type="text,其使用方法如下:
呈现结果 | 姓名: |
原始码 | <form action=http://www.baidu.com/nameproject.aspmethon=”post”> |
它有下列可设定之属性:
name="名称",是设定此一栏位的名称,程式中常会用到。
size="数值",是设定此一栏位显现的宽度。
value="预设内容",是设定此一栏位的预设内容。
align="对齐方式",是设定此一栏位的对齐方式,其值有:top(向上对齐)、middle(向中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对置中)、absbottom(绝对置下)等。
maxlength="数值",是设定此一栏位可设定输入的最大长度。
单选框:利用type="radio"就会产生单选核取表单,单选核取表单通常是好几个选项一起摆出来供使用者点选,一次只能从中选一个,故为单选核取表单。
呈现结果 | 性别:男 女 |
原始码 | <form> |
它有下列可设定之属性:
name="名称",是设定此一栏位的名称,程式中常会用到。
value="内容",是设定此一栏位的内容、值或是意义。
align="对齐方式",是设定此一栏位的对齐方式,其值有:top(向上对齐)、middle(向中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对置中)、absbottom(绝对置下)等。
checked,是设定此一栏位为预设选取值。
复选框:利用type=" checkbox "就会产生复选核取表单,复选核取表单通常是好几个选项一起摆出来供使用者点选,一次可以同时选好几个,故为复选核取表单。
呈现结果 | 喜好: 电影 看书 |
原始码 | <form> |
它有下列可设定之属性:
name="名称",是设定此一栏位的名称,程式中常会用到。
value="内容",是设定此一栏位的内容、值或是意义。
align="对齐方式",是设定此一栏位的对齐方式,其值有:top(向上对齐)、middle(向中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对置中)、absbottom(绝对置下)等。
checked,是设定此一栏位为预设选取值。
密码表单:利用type=" password "就会产生一个密码表单,密码表单和文字输入表单长得几乎一样,差别就在于密码表单在输入时全部会以星号来取代输入的文字,以防他人偷窥。
呈现结果 | 请输入密码: |
原始码 | <form> |
它有下列可设定之属性:
name="名称",是设定此一栏位的名称,程式中常会用到。
size="数值",是设定此一栏位显现的宽度。
value="预设内容",是设定此一栏位的预设内容,不过呈现出来仍是星号。
align="对齐方式",是设定此一栏位的对齐方式,其值有:top(向上对齐)、middle(向中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对置中)、absbottom(绝对置下)等。
maxlength="数值",是设定此一栏位可设定输入的最大长度。
送出按钮:通常我们表单填完之后,都会有一个送出按钮以及清除重写的按钮,分别是利用type=" submit "及type=" reset "来产生,相当的简单易用。
呈现结果 |
|
原始码 | <form> |
它有下列可设定之属性:
name="名称",是设定此一按钮的名称。
value="文字",是设定此一按钮上要呈现的文字,若是没有设定,浏览器也会自动替您加上“送出查询”、“重设”等字样。
align="对齐方式",是设定此一栏位的对齐方式,其值有:top(向上对齐)、middle(向中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对置中)、absbottom(绝对置下)等。
按钮元件:表单中或是java script常会用到按钮来作一些效果,因此,我们可以利用type=" button "来产生一个按钮,相当简单。
呈现结果 | 请按下按钮: |
原始码 | <form> |
它有下列可设定之属性:
name="名称",是设定此一按钮的名称。
value="文字",是设定此一按钮上要呈现的文字。
align="对齐方式",是设定此一栏位的对齐方式,其值有:top(向上对齐)、middle(向中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对置中)、absbottom(绝对置下)等。
隐藏栏位:表单中有时有些东西因为某些因素,不想让使用者看到,但因程式需要却又不得不存在,此时,我们就可以利用type=" hidden "来产生一个隐藏的栏位。
呈现结果 | 隐藏栏位: |
原始码 | <form> |
它有下列可设定之属性:
name="名称",是设定此一栏位的名称。
value="文字",是设定此一栏位的值、文字或意义。
【大量文字输入元件】
有时候我们会希望让使用者输入比较大量的文字,此时,文字输入列就显得不敷使用,因此我们就可以利用<textarea></textarea>来产生一个可以输入大量文字的元件,夹在两个标签中的文字会出现在框框中,可作为预设文字。
呈现结果 | 请输入您的意见:
|
原始码 | <form> |
它有下列可设定之属性:
name="名称",是设定此一栏位的名称。
wrap="设定值",是设定此一栏位的换行模式。设定值有三种:off(输入文字不会自动换行)、virtual(输入文字在萤幕上会自动换行,不过若是使用者没有自行按下enter换行,送出资料时,也视为没有换行)、physical(输入文字会自动换行,送出资料时,会将萤幕上的自动换行,视为换行效果送出)。
cols="数值",是设定此一栏位的行数(横向字数)。
rows="数值",是设定此一栏位的列数(垂直字数)。
【下拉式选单】
下拉式选单令整个网页看起来有很专业的感觉,我们只要利用<select name="名称">便可以产生一个下拉式选单,另外,还需要配合<option>标签来产生选项,这样才算完整喔!
呈现结果 | 您喜欢看书吗?: |
原始码 | <form> |
它有下列可设定之属性:
size="数值",是设定此一栏位的大小,预设值为1,若是您的选项有四个,然后您将size设成4,那么,下拉式选单便会变成选项方块,将四个选项一起呈现在方块中。
multiple,是设定此一栏位为复选,可以一次选好几个选项。
-END-
# 越努力,越幸运!#
精选 | 干货 | 经验 | 分享
UI范儿 | 越努力,越幸运
【UI范儿交流群开放中】
QQ群:325192599
微信ID:UIfaner