<form action=“http://wickedlysmart.com/hfhtmlcss/contest.php” method=“POST”>
</form>
action中的链接为后台服务器中处理form表单的脚本
method方法有get和post:
使用get方法时,表单中的值被附加在由action特性所指定的URL末尾,适用于:
1.短表单
2.只从web服务器上检索数据的情形
使用post方法时,表单中的值被放在http头信息中进行发送,适用于:
1.允许用户上传文件
2.非常长
3.包含敏感信息
4.向数据库中添加信息,或删除信息
<input type=“text” name=“fullname”> type为文本类型,name为了与服务器交互使用,maxlength设置最大长度,input为空元素
type="password“,不能用这种方式发送敏感数据,比如信用卡号。为了保证绝对的安全,就要设置服务器通过安全套接层SSL与用户的浏览器进行连接
type="radio”,多个单选按钮中name属性必须相同,value属性为选项指定了被选中时要发送到服务器的值,checked属性为checked时该单选按钮默认被选中
type="checkbox",多个复选框中name属性相同,value属性为选项指定了被选中时要发送到服务器的值,checked属性为默认选中
type="file",此时form元素中的method必须为POST才可以用
type="submit",提交按钮中的vaule属性为按钮上显示的文字
type="image",使用图像作为提交按钮,src="image/sub.jpg" width="100" heigth="20"
type="hidden",隐藏表单控件
type=“date",日期控件
type=”mail",邮件输入框
type=“url”,输入url地址
type="search",搜索输入控件
<input id="female" type="radio" name="gender" value="f"><label for="female">Female</label> //单选按钮+Female文字,label标签中的for属性和id属性连接在一起,此时单击Female文字也会有选中的效果
<select name=“”> //下拉列表框,name和option中value值一同被发送给服务器,selected="selected"为默认被选中的
<option value=“”>xx</option>
</select>
<select name="" size="3" multiple="multiple"> //多选列表框,size为一次显示的选项数量
<option value="">xx</option>
</select>
<textarea name=“” rows=“10” cols=“48”></textarea>多行文本输入域
<button>xxx</button>
<fieldset> //可将相关的表单控件至于其中,在表单外围有一条边缘线
<legend>contact details</legend> 表单的标题
<label>xxx<input type="" name=""/></label>
</fieldset>
HTML5表单验证,只有chrome和opera浏览器支持html5的验证机制,在表单的属性中输入required="required"表示此项为必填,不输入提交会有浏览器给出的提示信息
<input type=“text” placeholder=“morenwenzi” required>有默认值的必填项
提交表单后页面会自动跳转到form标签中的action属性的地址中
type=number 只能输入数字<input type=“number” min=“0” max=“20” step=“5”>
type=color
type=tel