前言:
此时各位老铁们对“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星号三角形