iT邦幫忙

2024 iThome 鐵人賽

DAY 12
0

form、input標籤

input標籤是在html當中很常使用的一個標籤,通常會搭配form使用,其主要的目的為接收使用者的數據,通過不同的屬性來接收各種不同類型的數據,如文字、密碼、數字、文件等,以下介紹基礎用法。

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" name="name">
  <input type="submit">
</form>

https://ithelp.ithome.com.tw/upload/images/20240924/20168332NJQ0XHLSxO.png
解釋:form是表單的標籤,action代表指定表單提交的路徑,methon是指傳送方法(post、get),label是普通的標籤,為了提示使用者的文字。
input 輸入框屬性介紹
type="text",text代表接收的是文字的數據類型的數據,另外還有password、file、number等類型的數據可以選擇。
name="name" 定義這個資料的名稱,以這個例子為例,這個數據就叫name,當發送出去時就會以它當鍵名發送給伺服器
最後一行type="submit",代表的是提交按鈕,就是將使用者輸入的數據傳送至action指定的路徑
button
button是在網頁上創建一個可以案的按鈕,通常我們會賦予它一些功能,以下演示。

<button type="button" onclick="">Click Me</button>

在mvc架構中,button的功能可以寫在controller當中,在上述的標籤中,onclick就是按下後要觸發甚麼功能,通常會填一個function的名稱。

總結:這篇文章當中講到較多使用者與網頁互動的功能,input是輸入框,目的是要讓使用者可以輸入資訊,input type其實有非常多種類型可以使用,這邊只有介紹較常用的幾種,button則是可以讓使用者觸發一些功能,都是網頁常用的互動技巧。


上一篇
DAY 11 HTML常用語法
下一篇
DAY 13 HTML div以及屬性
系列文
從零開始使用Microsoft MVC架構來搭建web server13
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言