基础表单结构:
<body>
<h1>
<hr />
<form action="" name="myFrom" enctype="multipart/form-data >
<input type="text" name="unname" /><br/>
<input type="password" name="pwd" /><br/>
<input type='submit" value="提交" />
</form>
</body>
{form表单的属性}
action=“URL”:一个URL地址:指定form表单向何处发送数据。
.它里面放一个路径,我们在代码编辑器中写form是总会自带着它,<form action="">.
.就是我们表单提交到服务器需要一段程序来处理,那有哪个程序处理就可以在action中指定,如果我是注册,可以由注册的程序来处理,登录由登录的程序来处理
name作用是给表单起名,为了便于我们操作,一个页面不止一个表单好用来区分
<form name="regFrm">通常我们给表单起名这样起:reg是这个表单是干什么的(reg注册)后面以Frm结尾,就是form的缩写。
enctype=“string”:规定在发送表单之前,如何对表单数据进行编码。通常在使用文件上传时,我们会写enctype=“multipart/form-data”,以二进制传输。
method=“get/post”:指定表单以何种方式发送到指定的服务器程序最常用的是个头和post。
表单元素:
。单行文本框<input type="text" />默认值是type=“text”
。密码框<input type="password" />
。单选按钮<input type="radio" />例子:
写作业了:<input type="radio" checked="checked" name="gender" value="male" /><br />
没写作业:<input type="radio" name="gender" value="female">
checked属性,默认选中当前的单选按钮,name是命名,value值是提交给后台程序看的。“相同的名字会把radio分为一组,一组radio只能选择一个。”名字相同即为一组让这一组radio产生关联用name。
。复选框<input type="checkbox" />
和单选按钮差不多
。隐藏域<input type="hidden" />
。文件上传<input type="file" />
<form action="" method="post" enctype="multipart/form-data" >
<input type="file" name="file1" />
</form>
。下拉框<select>标签<select><option value="1">北京</option></select>
。多行文本框<textarea></taxtarea>
。标签<lable></lable>为input元素定义标注。
label本身不会有特殊效果,但它和其他input标签使用可以提升用户的使用体验,用户不用非得点击到按钮,而是点击文字即可选中。<label>虽然和input进行了关联,但是提交的依然是value的值,label中的内容不会被提交。label标签一般和radio、CheckBox类型一起使用。
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
</form>
。元素集<fieldset></fieldset>
。提交按钮<input type="submit" />
。普通按钮<input type="button" />
。重置按钮<input type="reset" />
练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" name="lainxiForm" enctype="multipart/form-data" method="get">
账号:<input type="text" name="noname" />
密码:<input type="password" name="pwd" />
<input type="submit" value="提交"/>
<!--(单选有无name都可以)-->
</form><hr />
<form action="" name="forName" method="get">你喜欢什么:
<label for="juhua">菊花</label><input type="radio" name="lianxi" checked="checked" id="juhua"value=""/>
<label for="kuihua">葵花</label><input type="radio" name="lianxi" id="kuihua" value=""/>
<!--value值要传送到后台服务器,需要后台人员告诉你-->
<!--复选框需要name联系在一起-->
<input type="submit" value="提交"/>
</form>
<hr />
<form>
你的爱好是:
睡觉<input type="checkbox" name="hobby"/>
吃<input type="checkbox" name="hobby" />
写代码<input type="checkbox" name="hobby" checked="checked"/>
<input type="submit" />
</form>
</body>
</html>