Html页面代码中 为什么要使用<form>表单标签,使用该标签有什么意义?

html-css015

Html页面代码中 为什么要使用<form>表单标签,使用该标签有什么意义?,第1张

html<form>表单标签使用在一个网页中数据提交标签。 例如,可以在留言板,评论等中填写数据,表单提交标签是提交处理所必需的。

<form>表单标签包含输入框input,单选,多选,select下拉列表菜单和跳转菜单,提交按钮和其他标签元素。

使用<form></ form>声明表单区域,并在<form>中填写action的值作为表单区域中提交内容发送到的页面地址。

扩展资料:

1、<form>表单的属性有:

accept-charset、action、method、name、target等。其中:

(1)action:表单提交的地址,action的地址就是要提交的服务器的地址。

(2)method:以何种方式提交,常见的为get和post,区别在于一个是明文(在url中显示),一个是暗文。

2、<form>标签使用示例:

<form action="demo_form.php" method="get">

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<input type="submit" value="提交">

</form>

当点击submit按钮时,浏览器会自动将表单信息封装提交至action中的地址。所谓的提交就是访问action中地址并携带着form表单中input,textarea,select的信息。

form保单提交的几种方法:

1、方法一:利用form的onsubmit()函数

<script type="text/javascript">

    function validateForm(){

  if(document.reply.title.value == ""){ //通过form名来获取form

  alert("please input the title!")

  document.reply.title.focus()

  return false

  }  

  if(document.forms[0].cont.value == ""){ //通过forms数组获取form

  alert("please input the content!")

  document.reply.cont.focus()

  return false

  }

  return true

  }

<form name="reply"  method="post" onsubmit="return validateForm( )">

        <input type="text" name="title"  size="80" /><br />

        <textarea name="cont" cols="80" rows="12"></textarea><br />

        <input type="submit" value="提交" >

</form>

注意:

1.onsubmit属性内容一定要有return关键字,否则函数会直接执行,不会返回

2.validateForm一定要返回一个boolean类型的返回值

3.提交按钮要写成submit类型的

方法二:利用input类型为submit组件的onclick()函数

  1.将上面form标签中的onsubmit="return validateForm()"属性,去掉。

  2.为“提交”按钮添加onclick事件,如下:

   <input type="submit" value="提交" onclick="return validateForm()">

方法三:利用button组件的onclick()函数,手动提交

<script type="text/javascript">

function modifyItem() {

if (trim(document.getElementById("itemName").value) == "") {

alert("物料名称不能为空!")

document.getElementById("itemName").focus()

return

with (document.getElementById("itemForm")) {

method = "post"

action = "item.do?command=modify&pageNo=${itemForm.pageNo}"

submit()

}

}

//返回

function goBack() {

window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}"

}

</script>

<form name="itemForm" id="itemForm">

      <input name="itemNo" type="text"   id="itemNo" value="${ item.itemNo }" >

      <input name="itemName" type="text"   id="itemName" value="${ item.itemName }" >

     <input name="btnModify"  type="button" id="btnModify" value=“修改" onclick="modifyItem()">

</form>

注意:

1.提交时,设置form的action和methods属性,然后利用form.submit()函数提交。