1. 程式人生 > >網頁制作-表單元素

網頁制作-表單元素

中間 服務端 輸入 文本 技術分享 表單 area input div

form表單是雙標記有開始和結束,<form></form>表單的屬性有name它的值是表單的名字 method它是表單的提交形式 action它的值是負責處理的服務端

例如:當method的值是get時,提交的編碼內容會顯示,但是有長度限制(相對來說不安全)

<form name="實例" method="get" action="aa.html"><input type="submit" name="shili"/></form>

在瀏覽器中顯示的網址是技術分享提交以後技術分享

當method的值是post時,提交的編碼內容不顯示沒有長度限制

<
form name="實例" method="post" action="aa.html"><input type="submit" name="shili"/></form>

在瀏覽器中顯示的網址技術分享提交以後技術分享

1、文本輸入 必須有name 可以沒有value 在網頁中顯示的網址上name=value

a.文本框

  <form name="實例" method="post" action="aa.html">
          <input type="text" name="shili"value="博客"/ >
      </form
>

瀏覽器顯示技術分享

b.密碼框

 <form name="實例" method="post" action="aa.html">
          <input type="password" name="mima" value="123"/>
      </form>

瀏覽器顯示技術分享

c.隱藏域(在瀏覽器中不顯示,但是提交的時候會繼續提交)

      <form name="實例" method="post" action="aa.html">
          <input type="hidden" name="yincang"
value="隱藏"/ > </form>

d.文本域(同樣有value值,只是不同於input的value值,它的value值是寫在兩個雙標記中間的

      <form name="實例" method="post" action="aa.html">
         <textarea name="wenbenyu">這是文本域</textarea>
      </form>

前端顯示技術分享可大可小,比如寫評論等

文本舒服的屬性除了上面說的,還有一個placeholder它是提示你這個文本框要輸入什麽內容的

例如

      <form name="實例" method="post" action="aa.html">
          <input type="password" name="mima"  placeholder="密碼"/>
      </form>

前段顯示技術分享

2、按鈕

a.提交按鈕,點擊後轉到form中action的值中的網址

      <form name="實例" method="get" action="aa.html">
          <input type="submit" name="tijiao"  value="提交"/>
      </form>

技術分享提交按鈕是用來給後臺提交輸入內容進行後臺處理的

b.充值按鈕

      <form name="實例" method="get" action="aa.html">
          <input type="reset" name="chongzhi"  value="重置"/>
      </form>

技術分享重置按鈕是用來重置輸入內容的

c.普通按鈕

      <form name="實例" method="get" action="aa.html">
          <input type="button" name="普通"  value="百度一下"/>
      </form>

技術分享比如百度,搜孤,谷歌等搜索用

d.圖片按鈕

      <form name="實例" method="get" action="aa.html">
          <input type="image" src="新建文件夾 (2)/shouye/images/lx1.png" name="T"  value="圖片"/>
      </form

技術分享用圖片來做按鈕用

網頁制作-表單元素