搜尋
首頁後端開發php教程第4章 与浏览者交互,表单标签

4-1 使用表单标签,与用户交互

网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

语法:

<form   method="传送方式"   action="服务器文件">

讲解:1.

标签是成对出现的,以
开始,以
结束。2.action 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。3.method 数据传送的方式(get/post)。
<form  method="post" action="save.php">    <label for="username">用户名:</label>     <input type="text" name="username" />     <label for="pass">密码:</label>     <input type="password" name="pass" /></form>

注意:所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在

标签之间(否则用户输入的信息提交不到服务器上!)。

1.png

4-2 文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框语法

<form>   <input type="text/password" name="名称" value="文本" /></form>

1、type:

当type="text"时,输入框为文本输入框; 当type="password"时,输入框为密码输入框。

2、name:为文本框命名,以备后台程序ASP 、PHP使用。

3、value:为文本输入框设置默认值。(一般起到提示作用)举例:

<form>  姓名:  <input type="text" name="myName">  <br/>  密码:  <input type="password" name="pass"></form>

在浏览器中显示的结果:

2.jpg

4-3 文本域,支持多行文本输入

当用户需要在表单中输入大段文字时,需要用到文本输入域。语法

<textarea  rows="行数"cols="列数">文本</textarea>

1、结束。2、cols :多行输入域的列数。3、rows :多行输入域的行数。4、在标签之间可以输入默认值

举例

<form method="post" action="save.php">      <label>联系我们</label>      <textarea cols="50" rows="10" >在这里输入内容...</textarea></form>

在浏览器中显示结果:

3.jpg

注意这两个属性可用css样式的width和height来代替:col用width、row用height来代替。4-4 使用单选框、复选框,让用户选择

在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子:

语法:

<input   type="radio/checkbox"   value="值"    name="名称"   checked="checked"/>

1、type:type="radio" 时,控件为单选框type="checkbox" 时,控件为复选框2、value:提交数据到服务器的值(后台程序PHP使用)3、name:为控件命名,以备后台程序 ASP、PHP 使用4、checked:当设置 checked="checked" 时,该选项被默认选中如下面代码:

4.jpg

在浏览器中显示的结果:

5.jpg

注意:同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

4-5 使用下拉列表框,节省空间

下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。如下代码:

6.jpg

讲解:1、value:

7.jpg

2、selected="selected":设置selected="selected"属性,则该选项就被默认选中。在浏览器中显示的结果:

8.jpg

4-6 使用下拉列表框进行多选

下拉列表也可以进行多选操作,在

9.jpg

在浏览器中显示的结果:

10.jpg

4-7 使用提交按钮,提交数据

在表单中有两种按钮可以使用,分别为:提交按钮、重置。这一小节讲解提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮语法

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

type:只有当type值设置为submit时,按钮才有提交作用

value按钮上显示的文字

举例

11.jpg

在浏览器中显示的结果:

12.jpg

4-8 使用重置按钮,重置表单信息

当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。语法

type:只有当type值设置为reset时,按钮才有重置作用

value按钮上显示的文字

举例

13.jpg

在浏览器中显示的结果:

14.jpg

输入账号

15.jpg

单击重置按钮4-9 form表单中的label标签

小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用。

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

语法:

<label for="控件id名称">

注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。例子:

<form>    <label for="male">男</label>   <input type="radio" name="gender" id="male" />    <br />    <label for="female">女</label>    <input type="radio" name="gender" id="female" />   <label for="email">输入你的邮箱地址</label>   <input type="email" id="email" placeholder="Enter email"></form>
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
PHP與Python:了解差異PHP與Python:了解差異Apr 11, 2025 am 12:15 AM

PHP和Python各有優勢,選擇應基於項目需求。 1.PHP適合web開發,語法簡單,執行效率高。 2.Python適用於數據科學和機器學習,語法簡潔,庫豐富。

php:死亡還是簡單地適應?php:死亡還是簡單地適應?Apr 11, 2025 am 12:13 AM

PHP不是在消亡,而是在不斷適應和進化。 1)PHP從1994年起經歷多次版本迭代,適應新技術趨勢。 2)目前廣泛應用於電子商務、內容管理系統等領域。 3)PHP8引入JIT編譯器等功能,提升性能和現代化。 4)使用OPcache和遵循PSR-12標準可優化性能和代碼質量。

PHP的未來:改編和創新PHP的未來:改編和創新Apr 11, 2025 am 12:01 AM

PHP的未來將通過適應新技術趨勢和引入創新特性來實現:1)適應云計算、容器化和微服務架構,支持Docker和Kubernetes;2)引入JIT編譯器和枚舉類型,提升性能和數據處理效率;3)持續優化性能和推廣最佳實踐。

您什麼時候使用特質與PHP中的抽像類或接口?您什麼時候使用特質與PHP中的抽像類或接口?Apr 10, 2025 am 09:39 AM

在PHP中,trait適用於需要方法復用但不適合使用繼承的情況。 1)trait允許在類中復用方法,避免多重繼承複雜性。 2)使用trait時需注意方法衝突,可通過insteadof和as關鍵字解決。 3)應避免過度使用trait,保持其單一職責,以優化性能和提高代碼可維護性。

什麼是依賴性注入容器(DIC),為什麼在PHP中使用一個?什麼是依賴性注入容器(DIC),為什麼在PHP中使用一個?Apr 10, 2025 am 09:38 AM

依賴注入容器(DIC)是一種管理和提供對象依賴關係的工具,用於PHP項目中。 DIC的主要好處包括:1.解耦,使組件獨立,代碼易維護和測試;2.靈活性,易替換或修改依賴關係;3.可測試性,方便注入mock對象進行單元測試。

與常規PHP陣列相比,解釋SPL SplfixedArray及其性能特徵。與常規PHP陣列相比,解釋SPL SplfixedArray及其性能特徵。Apr 10, 2025 am 09:37 AM

SplFixedArray在PHP中是一種固定大小的數組,適用於需要高性能和低內存使用量的場景。 1)它在創建時需指定大小,避免動態調整帶來的開銷。 2)基於C語言數組,直接操作內存,訪問速度快。 3)適合大規模數據處理和內存敏感環境,但需謹慎使用,因其大小固定。

PHP如何安全地上載文件?PHP如何安全地上載文件?Apr 10, 2025 am 09:37 AM

PHP通過$\_FILES變量處理文件上傳,確保安全性的方法包括:1.檢查上傳錯誤,2.驗證文件類型和大小,3.防止文件覆蓋,4.移動文件到永久存儲位置。

什麼是無效的合併操作員(??)和無效分配運算符(?? =)?什麼是無效的合併操作員(??)和無效分配運算符(?? =)?Apr 10, 2025 am 09:33 AM

JavaScript中處理空值可以使用NullCoalescingOperator(??)和NullCoalescingAssignmentOperator(??=)。 1.??返回第一個非null或非undefined的操作數。 2.??=將變量賦值為右操作數的值,但前提是該變量為null或undefined。這些操作符簡化了代碼邏輯,提高了可讀性和性能。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。