表单

<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

posted @ 2017-06-26 14:46  eudaemonia  阅读(186)  评论(0编辑  收藏  举报