表單控制項」。 form表單中可包含一個或多個表單元素,例如input、select、textarea。"/> 表單控制項」。 form表單中可包含一個或多個表單元素,例如input、select、textarea。">

首頁  >  文章  >  web前端  >  html中的from標籤有什麼用

html中的from標籤有什麼用

青灯夜游
青灯夜游原創
2022-09-15 17:36:137560瀏覽

在html中,from標籤用於建立供使用者輸入的HTML表單(表單域),以實現使用者資訊的收集和傳遞,form中的所有內容都會提交給伺服器;語法「表單控制項」。 form表單中可包含一個或多個表單元素,例如input、select、textarea。

html中的from標籤有什麼用

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

html5 form標籤

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

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

標籤語法格式

<form action="提交地址" method="提交方式" name="表单名称">
  各种表单控件
</form>
  • #name:只是給該表單命名,用於js技術使用。

  • action:設定表單資料提交給哪個文件,用於後端技術(例如php)來接受並處理資料

  • method : 設定資料提交方式,用於根據不同的資料需求來選擇適當的提交(傳送)方式

#method提交方式常用的4種:

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

post和get區別:

  • 資料提交方式,get把提交的資料url可以看到,post看不到

  • get一般用於提交少量數據,post用來提交大量數據

  • get最多提交1K數據,post理論上沒有限制

  • get提交的數據在瀏覽器歷史記錄中,安全性不好

一個完整的表單包含三個基本組成部分:表單標籤、表單域、表單按鈕。

1、表單標籤

是指form標籤本身,它是一個包含表單元素的區域,使用定義

2、表單域

是標籤中用來收集使用者輸入的每一項,通常用input標籤來定義,input標籤有不同的類型,對應使用者不同的資料。 (例如:文字網域、下拉清單、單選方塊、複選框等等)

3、表單按鈕

用來提交表單中的所有資訊到伺服器

*表单域和表单按钮都属于表单元素。

單行文字方塊<input type="text">預設值是type="text"

密碼方塊<input type="password"> 

單選按鈕<input type="radio" name="">

##複選框

隱藏域

檔案上傳

下拉方塊

多行文字

提交按鈕

普通按鈕

重設按鈕

控制項標籤:

input標籤

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

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

    
        <input>     

html中的from標籤有什麼用

input標籤的一些屬性:

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

<table> <thead><tr class="firstRow"> <th>属性</th> <th>属性值</th> <th>描述</th> </tr></thead> <tbody> <tr> <td>type</td> <td>Text</td> <td>单行文本输入框</td> </tr> <tr> <td><br></td> <td>Password</td> <td>密码输入框</td> </tr> <tr> <td><br></td> <td>Radio</td> <td>单选按钮</td> </tr> <tr> <td><br></td> <td>Checkbox</td> <td>复选框</td> </tr> <tr> <td><br></td> <td>Button</td> <td>普通按钮</td> </tr> <tr> <td><br></td> <td>Submit</td> <td>提交按钮</td> </tr> <tr> <td><br></td> <td>Reset</td> <td>重置按钮</td> </tr> <tr> <td><br></td> <td>Image</td> <td>图像形式的提交按钮</td> </tr> <tr> <td><br></td> <td>File</td> <td>文本域</td> </tr> <tr> <td>name</td> <td><br></td> <td>空间的名称</td> </tr> <tr> <td>value</td> <td><br></td> <td>input控件中的默认文本值</td> </tr> <tr> <td>size</td> <td><br></td> <td>input控件在页面中的显示宽度</td> </tr> <tr> <td>checked</td> <td><br></td> <td>定义选择空间默认被选中的项</td> </tr> <tr> <td>Maxlength</td> <td><br></td> <td>控件允许输入的最多字符数</td> </tr> </tbody> </table> <h3><strong>密码框</strong></h3> <pre class="brush:php;toolbar:false">&lt;input&gt;</pre> <p><img src="https://img.php.cn/upload/article/000/000/024/506b613f2c6dc265395f785926df2f38-1.png" alt="html中的from標籤有什麼用"></p> <h3><strong>单选框</strong></h3> <p><code>name相同的单选框智能选择一个

        男 <input> 
        女 <input>

html中的from標籤有什麼用

复选框

多选框可以选取多个

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

按钮

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

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

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

    
        <input>         <input>         <input>     

html中的from標籤有什麼用

下拉框标签

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

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

html中的from標籤有什麼用

(学习视频分享:web前端入门

以上是html中的from標籤有什麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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