1、form表单是在网站制作中常用到的功能,例如用户名的注册,简历的制作等都会用到form表单。
HTML 中规定,使用 <form> 标签来表示表单。我们都知道表格的行、列及单元格需要放在 <table></table> 标签中,表单里的元素也不例外,同样需要放在 <form></form> 标签中。<form> 标签有几个常用的属性,见下表:
常用属性 | 属性值 | 说明 |
---|---|---|
action | url | 用户点击提交按钮时,表单被提交到的位置。 |
method | get / post | 表单提交时所使用的 http 请求方法,只能是 get 或 post 中的任意一种。 |
name | 自定义 | 表单的名称,不能包含特殊字符和空格。 |
具体语法如下:
<form action="url" method="post" name="formName"></form>
2、form表单的基本属性主要是method,action,target,它们分别代表表单传输的方法,提交给某个页面,在哪个页面打开。method又分为get和post两种方式。target可以选择_black和_self,分别代表在另一个空白页面和在本来的页面打开。代码如下:
<form method="get" action="Untitled-2.html" target="_blank">
<form method="post" action="Untitled-2.html" target="_self">
3、表单的文本标签包括type,name,value,textarea,maxlength,type属性有text,password,hidden。textarea是文本领域的意思,它经常用到的属性是rows.代表可以写几行。代码如下:
用户名:
<input type="text" name="user" placeholder="提示文字" />
<br />
密码:
<input type="password" maxlength="2" name="pwd" />
4、表单的按钮标签包括submit(提交),reset(重置),image(图片),button(按钮)。代码如下:
<input type="submit" value="注册"/>
<input type="reset" value="重置" />
<input type="image" src="图片.jpg" />
<input type="button" value="按钮" οnclick="alert('啊')" />
5、表单中常常用到单选或复选的模式,如性别,出生日期等,选择的标签有radio(单选),checkbox(复选),select(下拉)。
radio的name属性要相同,分为两组,value用以区分两组的对象。chekbox的name属性和value属性都不能相同,radio和chekbox还可以添加label属性,label后边必须跟for,意思是把……称为,代码如下:
<input type="radio" name="sex" value="1" id="s1"/><label for="s1">男</label>
<input type="radio" name="sex" value="0" id="s0" /><label for="s0">女</label>
<input type="checkbox" name="c1" id="c1"value="v1" /><label for="c1">足球</label>
<input type="checkbox" name="c2" id="c2"value="v2" /><label for="c2">篮球</label>
6、form表单还有一些比较常用的其它属性,如readonly(只读),disable(使……不可能),hidden(隐藏),checked(规定在页面加载时应该被预先选定的 input 元素),selected(被预选的选项会显示在下拉列表最前面的位置),代码如下:
<input type="text" name="login" value="abc-123" readonly="readonly" />
<input type="text" name="login" value="abc-123" disabled="disabled" />
<input type="hidden" name="yc" value="zhi" />
<option value="25501">睡觉</option>
<option value="25502">游戏</option>
<option value="25503" selected="selected">零食</option>