龙空技术网

html基础知识解析(三) |实用干货

UI严选 180

前言:

此时各位老铁们对“html星号三角形”大体比较关切,同学们都需要了解一些“html星号三角形”的相关内容。那么小编同时在网络上汇集了一些对于“html星号三角形””的相关知识,希望各位老铁们能喜欢,你们一起来学习一下吧!

表单标签

网页(程序)如果要和用户产生互动,则必须借助一定的中介,这个中介一般是:文本输入框、按钮、多选框、单选框。而表单则是这些中介和放置这些中介的空间(<form action=”” methon=””></form>)。

在网页中,这些文本输入框、按钮等等必须放置在由<form></form>这个标签所定义的空间中,否则没有实际意义。所以,由<form></form>标签所定义的空间就是表单存在的空间。

【各种输入类型】

文字输入框:每个表单之所以会有不同的类型,原因就在于type="表单类型"设定的不同而已,我们就先来看看第一个类型:文字输入列。文字输入列的形态就是type="text,其使用方法如下:

呈现结果

姓名:

原始码

<form action=”post”>

姓名:<input type="text" name="name" size="20">

</form>

它有下列可设定之属性:

name="名称",是设定此一栏位的名称,程式中常会用到。size="数值",是设定此一栏位显现的宽度。value="预设内容",是设定此一栏位的预设内容。align="对齐方式",是设定此一栏位的对齐方式,其值有:top(向上对齐)、middle(向中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对置中)、absbottom(绝对置下)等。maxlength="数值",是设定此一栏位可设定输入的最大长度。

单选框:利用type="radio"就会产生单选核取表单,单选核取表单通常是好几个选项一起摆出来供使用者点选,一次只能从中选一个,故为单选核取表单。

呈现结果

性别:男 女

原始码

<form>

性别:

男 <input type="radio" name="sex" value="boy">

女 <input type="radio" name="sex" value="girl">

</form>

它有下列可设定之属性:

name="名称",是设定此一栏位的名称,程式中常会用到。value="内容",是设定此一栏位的内容、值或是意义。align="对齐方式",是设定此一栏位的对齐方式,其值有:top(向上对齐)、middle(向中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对置中)、absbottom(绝对置下)等。checked,是设定此一栏位为预设选取值。

复选框:利用type=" checkbox "就会产生复选核取表单,复选核取表单通常是好几个选项一起摆出来供使用者点选,一次可以同时选好几个,故为复选核取表单。

呈现结果

喜好: 电影 看书

原始码

<form>

喜好:

<input type="checkbox" name="sex" value="movie">电影

<input type="checkbox" name="sex" value="book">看书

</form>

它有下列可设定之属性:

name="名称",是设定此一栏位的名称,程式中常会用到。value="内容",是设定此一栏位的内容、值或是意义。align="对齐方式",是设定此一栏位的对齐方式,其值有:top(向上对齐)、middle(向中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对置中)、absbottom(绝对置下)等。checked,是设定此一栏位为预设选取值。

密码表单:利用type=" password "就会产生一个密码表单,密码表单和文字输入表单长得几乎一样,差别就在于密码表单在输入时全部会以星号来取代输入的文字,以防他人偷窥。

呈现结果

请输入密码:

原始码

<form>

请输入密码:<input type="password" name="input">

</form>

它有下列可设定之属性:

name="名称",是设定此一栏位的名称,程式中常会用到。size="数值",是设定此一栏位显现的宽度。value="预设内容",是设定此一栏位的预设内容,不过呈现出来仍是星号。align="对齐方式",是设定此一栏位的对齐方式,其值有:top(向上对齐)、middle(向中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对置中)、absbottom(绝对置下)等。maxlength="数值",是设定此一栏位可设定输入的最大长度。

送出按钮:通常我们表单填完之后,都会有一个送出按钮以及清除重写的按钮,分别是利用type=" submit "及type=" reset "来产生,相当的简单易用。

呈现结果

原始码

<form>

<input type="submit" value="送出资料">

<input type="reset" value="重新填写">

</form>

它有下列可设定之属性:

name="名称",是设定此一按钮的名称。value="文字",是设定此一按钮上要呈现的文字,若是没有设定,浏览器也会自动替您加上“送出查询”、“重设”等字样。align="对齐方式",是设定此一栏位的对齐方式,其值有:top(向上对齐)、middle(向中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对置中)、absbottom(绝对置下)等。

按钮元件:表单中或是java script常会用到按钮来作一些效果,因此,我们可以利用type=" button "来产生一个按钮,相当简单。

呈现结果

请按下按钮:

原始码

<form>

请按下按钮:<input type="button" name="ok" value="我同意">

</form>

它有下列可设定之属性:

name="名称",是设定此一按钮的名称。value="文字",是设定此一按钮上要呈现的文字。align="对齐方式",是设定此一栏位的对齐方式,其值有:top(向上对齐)、middle(向中对齐)、bottom(向下对齐)、right(向右对齐)、left(向左对齐)、texttop(向文字顶部对齐)、baseline(向文字底部对齐)、absmiddle(绝对置中)、absbottom(绝对置下)等。

隐藏栏位:表单中有时有些东西因为某些因素,不想让使用者看到,但因程式需要却又不得不存在,此时,我们就可以利用type=" hidden "来产生一个隐藏的栏位。

呈现结果

隐藏栏位:

原始码

<form>

隐藏栏位:<input type="hidden" name="nosee" value="看不到">

</form>

它有下列可设定之属性:

name="名称",是设定此一栏位的名称。value="文字",是设定此一栏位的值、文字或意义。

【大量文字输入元件】

有时候我们会希望让使用者输入比较大量的文字,此时,文字输入列就显得不敷使用,因此我们就可以利用<textarea></textarea>来产生一个可以输入大量文字的元件,夹在两个标签中的文字会出现在框框中,可作为预设文字。

呈现结果

请输入您的意见:

原始码

<form>

请输入您的意见:<br>

<textarea name="talk" cols="20" rows="3"></textarea>

</form>

它有下列可设定之属性:

name="名称",是设定此一栏位的名称。wrap="设定值",是设定此一栏位的换行模式。设定值有三种:off(输入文字不会自动换行)、virtual(输入文字在萤幕上会自动换行,不过若是使用者没有自行按下enter换行,送出资料时,也视为没有换行)、physical(输入文字会自动换行,送出资料时,会将萤幕上的自动换行,视为换行效果送出)。cols="数值",是设定此一栏位的行数(横向字数)。rows="数值",是设定此一栏位的列数(垂直字数)。

【下拉式选单】

下拉式选单令整个网页看起来有很专业的感觉,我们只要利用<select name="名称">便可以产生一个下拉式选单,另外,还需要配合<option>标签来产生选项,这样才算完整喔!

呈现结果

您喜欢看书吗?:

非常喜欢

还算喜欢

不太喜欢

非常讨厌

原始码

<form>

您喜欢看书吗?:

<select name="like">

<option value="非常喜欢">非常喜欢

<option value="还算喜欢">还算喜欢

<option value="不太喜欢">不太喜欢

<option value="非常讨厌">非常讨厌

</select>

</form>

它有下列可设定之属性:

size="数值",是设定此一栏位的大小,预设值为1,若是您的选项有四个,然后您将size设成4,那么,下拉式选单便会变成选项方块,将四个选项一起呈现在方块中。

multiple,是设定此一栏位为复选,可以一次选好几个选项。

....................................................................

我的微信公众号:UI严选 —越努力,越幸运

标签: #html星号三角形