基礎的HTML表單


form(表單),它是頁面與WEB服務器交互過程中最重要的信息來源,在網頁中的作用不可小視。負責獲取用戶填寫數據,並通過瀏覽器向服務器傳送數據。

一個表單有三個基本組成部分:

表單標簽:這里面包含了處理表單的數據所用程序的URL以及數據提交到服務器的方法,表單名等。

語法:<form action="服務器程序URL(提交到給誰處理)" method=" get/post" enctype=" MIME信息" target="文檔顯示方式" >表單詳細設置</form>

表單域:包括了文本框(text),密碼框(password),隱藏域(hidden),復選框(checkbox),單選框(radio),文件上傳框(file),

多行文本框( 基本語法:<textarea name="" col="" row="" wrap="" ></textraea>)

下拉選擇框(基本語法:<select name=""><option value="" selected(表示默認選擇本項顯示在下拉菜單上)>廣州</option></select)等。

  表單按鈕:包括提交按鈕(submit),復位按鈕(reset),一般按鈕(button), 圖片按鈕(image)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    
    input,select,textarea{ margin-top: 15px; }
</style>
<body>

<form action="login.html" method="post" target="_blank">
<label for="user">用戶名:</label>
<input type="text" name="user" id="<user></user>" size="" maxlength="8" value="請輸入..."/><br>

<label for="password">密 碼:</label>
<input type="password" name="password" id="password" size="" maxlength="" value=""/><br>

<label for="checkbox">復選框:</label>
<input type="checkbox" name="" id="checkbox" value=""/><br>

<label for="radio">單選框:</label>
<input type="radio" name="" id="radio" value=""/><br>

<label for="hidden">隱藏域:</label>
<input type="hidden" name="" id="hidden" value=""/><br>

<label for="file">上傳文件:</label>
<input type="file" name="" id="file"/><br>


<label for="sel">下拉菜單:</label>
<select name="" id="sel">
    <option value="2" > 上海</option>
    <option value="1" selected> 廣州市</option>
    <option value="3" > 深圳</option>
    <option value="4" > 北京</option>
</select><br>

<label for="ta">多行文本框:</label><br>
<textarea name="desc" cols="50" rows="10" wrap="" id="ta"></textarea><br>

<input  type="submit" name="sub" value="這是提交按鈕"/>
<input  type="reset" name="res" value="這是復位按鈕"/>
<input  type="button" name="btn" value="這是普通按鈕"/>
<input  type="image" name="img" src="btn.jpg"/>
</form>
    
</body>
</html>

 

在上面<label for=""></label>中的for屬性要與<input>標簽或相關元素的id屬性一樣,這樣是一個關聯在一起的效果。

 

顯示的效果:

 

 


免責聲明!

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



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