首頁  >  文章  >  web前端  >  web前端中表單有什麼作用

web前端中表單有什麼作用

青灯夜游
青灯夜游原創
2023-01-29 11:53:242820瀏覽

表單的作用有兩個:1、對使用者而言是資料輸入和提交的介面;2、對網站而言是取得使用者資訊的途徑。一個表單有三個基本組成部分:1、表單標籤,包含了處理表單資料所用CGI程式的URL以及資料提交到伺服器的方法;2、表單網域,包含了文字方塊、密碼框、隱藏域、多行文本框等;3、表單按鈕,包含了提交按鈕、重設按鈕和一般按鈕,用於將資料傳送到伺服器上的CGI腳本或取消輸入等。

web前端中表單有什麼作用

本教學操作環境:windows7系統、Dell G3電腦。

web前端中的表單

表單,在網頁中的作用不可小視,主要負責資料收集的功能,例如你可以擷取訪客的名字和e-mail地址、調查表、留言簿等等。

表單的作用:

  • 表單對使用者而言是資料輸入和提交的介面;

  • 表單對於網站而言是取得使用者資訊的途徑。

一個表單有三個基本組成: 

  • #表單標籤<form></form> :這裡麵包含了處理表單資料所用CGI程式的URL以及資料提交到伺服器的方法。 

  • 表單網域:包含了文字方塊、密碼方塊、隱藏網域、多行文字方塊、核取方塊、單一選取方塊、下拉選取方塊和檔案上傳方塊等。

  • 表單按鈕:包含提交按鈕、重設按鈕和一般按鈕;用於將資料傳送到伺服器上的CGI腳本或取消輸入,也可以用表單按鈕來控制其他定義了處理腳本的處理工作。

表單標籤<form></form>

#form標籤用於建立使用者輸入的HTML表單(表單域),以實現使用者資訊的收集和傳遞,form中的所有內容都會提交給伺服器。

form表單域中可以包含各種互動控制項--控制項標籤(文字欄位、複選框、單選框、提交按鈕等等),例如、、< ; select>、等標籤。

標籤語法格式

<form action="提交地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

method提交方式常用的4種:

get         一般用来查询信息
post        一般用来新增信息
put         一般用来修改信息
delete      一般用来删除信息

表單域和表單按鈕

input標籤

  • input 輸入的意思
  • &lt;input&gt; 標籤為單一標籤
  • type屬性設定不同的屬性值用來指定不同的控制項類型
  • #除了type屬性還有別的屬性

#type="text"為普通輸入框value為裡面的值name和id會在寫js的時候用##

    
        <input>     

web前端中表單有什麼作用

input標籤的一些屬性:

checked屬性只有單選方塊和複選框才有

屬性屬性值#描述type# Text單行文字輸入框#Password「密碼輸入方塊##重設按鈕Image圖片形式的提交按鈕##File namevaluesizecheckedMaxlength

Password

Radio 單選按鈕

Checkbox 複選框

Button #普通按鈕

Submit 提交按鈕

#Reset


文字域

#空間的名稱

input控制項中的預設文字值
##input控制項在頁面中的顯示寬度
#定義選擇空間預設被選取的項目
######控制項允許輸入的最多字元數############

密码框

<input>

web前端中表單有什麼作用

单选框

name相同的单选框智能选择一个

        男 <input> 
        女 <input>

web前端中表單有什麼作用

复选框

多选框可以选取多个

        爱好: 
          抽烟<input>          喝酒<input>          烫头<input>

按钮

普通按钮可以根据需求来用js添加功能

提交按钮会把输入的表单信息提交到form表单的action地址

重置按钮会把表单信息重置为默认

    
        <input>         <input>         <input>     

web前端中表單有什麼作用

下拉框标签

下拉框标签有点特殊,不是input的属性而是一个单独的标签

        <select>
            <option>山东</option>
            <option>北京</option>
            <option>江苏</option>
            <option>深圳</option>
            <option>上海</option>
        </select>

web前端中表單有什麼作用

相关推荐:《html视频教程

以上是web前端中表單有什麼作用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn