表單form的屬性,單行文本框、密碼框、單選多選按鈕


基礎表單結構:

<body>

  <h1>

  <hr />

  <form action="" name="myFrom" enctype="multipart/form-data >

    <input type="text" name="unname" /><br/>

    <input type="password" name="pwd" /><br/>

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

  </form>

</body>

{form表單的屬性}

  action=“URL”:一個URL地址:指定form表單向何處發送數據。

.它里面放一個路徑,我們在代碼編輯器中寫form是總會自帶着它,<form action="">.

.就是我們表單提交到服務器需要一段程序來處理,那有哪個程序處理就可以在action中指定,如果我是注冊,可以由注冊的程序來處理,登錄由登錄的程序來處理

  name作用是給表單起名,為了便於我們操作,一個頁面不止一個表單好用來區分

<form name="regFrm">通常我們給表單起名這樣起:reg是這個表單是干什么的(reg注冊)后面以Frm結尾,就是form的縮寫。

    enctype=“string”:規定在發送表單之前,如何對表單數據進行編碼。通常在使用文件上傳時,我們會寫enctype=“multipart/form-data”,以二進制傳輸。

  method=“get/post”:指定表單以何種方式發送到指定的服務器程序最常用的是個頭和post。

表單元素:

。單行文本框<input type="text" />默認值是type=“text”

。密碼框<input type="password" />

。單選按鈕<input type="radio" />例子:

寫作業了:<input type="radio" checked="checked" name="gender" value="male" /><br />

沒寫作業:<input type="radio" name="gender" value="female">

  checked屬性,默認選中當前的單選按鈕,name是命名,value值是提交給后台程序看的。“相同的名字會把radio分為一組,一組radio只能選擇一個。”名字相同即為一組讓這一組radio產生關聯用name。

。復選框<input type="checkbox" />

和單選按鈕差不多

。隱藏域<input type="hidden" />

。文件上傳<input type="file" />

  <form action="" method="post" enctype="multipart/form-data" >

    <input type="file" name="file1" />

  </form>

。下拉框<select>標簽<select><option value="1">北京</option></select>

。多行文本框<textarea></taxtarea>

。標簽<lable></lable>為input元素定義標注。

label本身不會有特殊效果,但它和其他input標簽使用可以提升用戶的使用體驗,用戶不用非得點擊到按鈕,而是點擊文字即可選中。<label>雖然和input進行了關聯,但是提交的依然是value的值,label中的內容不會被提交。label標簽一般和radio、CheckBox類型一起使用。

<form>

  <label for="male">Male</label>

  <input type="radio" name="sex" id="male" />

</form>

。元素集<fieldset></fieldset>

。提交按鈕<input type="submit" />

。普通按鈕<input type="button" />

。重置按鈕<input type="reset" />

 

練習:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <form action="" name="lainxiForm" enctype="multipart/form-data" method="get">
  賬號:<input type="text" name="noname" />
  密碼:<input type="password" name="pwd" />
       <input type="submit" value="提交"/>
  <!--(單選有無name都可以)-->
  </form><hr />
  <form action="" name="forName" method="get">你喜歡什么:
    <label for="juhua">菊花</label><input type="radio" name="lianxi" checked="checked" id="juhua"value=""/>
    <label for="kuihua">葵花</label><input type="radio" name="lianxi" id="kuihua" value=""/>
    <!--value值要傳送到后台服務器,需要后台人員告訴你-->
    <!--復選框需要name聯系在一起-->
    <input type="submit" value="提交"/>
  </form>
  <hr />
  <form>
    你的愛好是:
    睡覺<input type="checkbox" name="hobby"/>
    吃<input type="checkbox" name="hobby" />
    寫代碼<input type="checkbox" name="hobby" checked="checked"/>
    <input type="submit" />
</form>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM