開始今天的內容之前首先來張圖
這界面看起來很眼熟哦 qq的登陸界面,一般輸入用戶名和密碼 然後點登陸 如果都正確的話就可以使用qq了.這節開始我們來研究一下從輸入密碼到登陸成功的過程(開始流程圖模式 )
今天我們來講第一部分 輸入相關信息。所以 首先我們需要一個框框輸入用戶名
網頁上用input標籤來實現 代碼如下
<input type="text">
然後我們在前面加上用戶名三個字
代碼如下
用戶名:<input type="text">
然後是密碼框，我們發現輸入的密碼顯示成了點，很顯然 上面那種input標籤做不到，所以我們需要改一下input標籤的type屬性 代碼如下(這裏用了一個br標籤換行)
用戶名:<input type="text"><br>
密碼:<input type="password">
再之後是兩個可以點的框框 叫做複選框(可以同時選多個) 繼續改type屬性 代碼如下
用戶名:<input type="text"><br>
密碼:<input type="password"><br>
<input type="checkbox">記住密碼<input type="checkbox">自動登錄
既然有了複選框，順路就說一下單選框 依然是改type屬性 代碼如下
用戶名:<input type="text"><br>
密碼:<input type="password"><br>
<input type="checkbox">記住密碼<input type="checkbox">自動登錄<br>
<input type="radio">男<input type="radio">女效果如下
然後我們發現 這傢伙可以既男又女，這很不科學，於是就有一個小小的要求，想要單選框互斥，需要它們的name屬性的值相同 如下
用戶名:<input type="text"><br>
密碼:<input type="password"><br>
<input type="checkbox">記住密碼<input type="checkbox">自動登錄<br>
<input type="radio" name="sex">男<input type="radio" name="sex">女效果同上，只是不會既男又女了。
然後是一種與單選按鈕類似的東西 叫做下拉列表，用select標籤 (注意哦，這裏用的不是input標籤)代碼如下
用戶名:<input type="text"><br>
密碼:<input type="password"><br>
<input type="checkbox">記住密碼<input type="checkbox">自動登錄<br>
<input type="radio" name="sex">男<input type="radio" name="sex">女<br>
<select>
<option value="標籤實際的值1">標籤顯示的值1</option>
<option value="標籤實際的值2">標籤顯示的值2</option>
<option value="標籤實際的值3">標籤顯示的值3</option>
<option value="標籤實際的值4">標籤顯示的值4</option>
</select>
有些時候可能在註冊某些東西的時候需要上傳一張圖片什麼的 ，這裏繼續使用input標籤 如下
用戶名:<input type="text"><br>
密碼:<input type="password"><br>
<input type="checkbox">記住密碼<input type="checkbox">自動登錄<br>
<input type="radio" name="sex">男<input type="radio" name="sex">女<br>
<select>
<option value="標籤實際的值1">標籤顯示的值1</option>
<option value="標籤實際的值2">標籤顯示的值2</option>
<option value="標籤實際的值3">標籤顯示的值3</option>
<option value="標籤實際的值4">標籤顯示的值4</option>
</select><br>
<input type="file">
該寫的信息都寫完了，最後還要有一個提交按鈕用來把數據發出去 如下
用戶名:<input type="text"><br>
密碼:<input type="password"><br>
<input type="checkbox">記住密碼<input type="checkbox">自動登錄<br>
<input type="radio" name="sex">男<input type="radio" name="sex">女<br>
<select>
<option value="標籤實際的值1">標籤顯示的值1</option>
<option value="標籤實際的值2">標籤顯示的值2</option>
<option value="標籤實際的值3">標籤顯示的值3</option>
<option value="標籤實際的值4">標籤顯示的值4</option>
</select><br>
<input type="file"><br>
<input type="submit">效果如下
有些時候一個頁面上有可能有不止一個提交按鈕，那麼點擊每個按鈕具體用什麼方式 發送哪些數據 到哪裏呢 這個時候就要用到一個叫form的標籤
<form name="input" action="發送的目標 暫時不用管" method="發送的方式 暫時也不用管">
用戶名:<input type="text"><br>
密碼:<input type="password"><br>
<input type="checkbox">記住密碼<input type="checkbox">自動登錄<br>
<input type="radio" name="sex">男<input type="radio" name="sex">女<br>
<select>
<option value="標籤實際的值1">標籤顯示的值1</option>
<option value="標籤實際的值2">標籤顯示的值2</option>
<option value="標籤實際的值3">標籤顯示的值3</option>
<option value="標籤實際的值4">標籤顯示的值4</option>
</select><br>
<input type="file"><br>
<input type="submit">
</form>這時 我們基本完成了我們的第一步了，但是有個小小的問題就是有點醜 於是我們想用某種方式讓他們稍微整齊一點 ，這時我們可以使用table標籤
table標籤 用來畫 一個表格，用內部包含的tr標籤的個數來確定該表格有多少行，用tr標籤中包含的td標籤的個數來確定有幾列 現在我們來畫一個三行兩列的表格
<table border='1'>
<tr><td>第一行第一列</td><td>第一行第二列</td></tr>
<tr><td>第二行第一列</td><td>第二行第二列</td></tr>
<tr><td>第三行第一列</td><td>第三行第二列</td></tr>
</table>
然後我們把前面寫的那些放到表格中
<html>
<head></head>
<body>
<form name="input" action="發送的目標 暫時不用管" method="發送的方式 暫時也不用管">
<table border='1'>
<tr><td>用戶名:</td><td><input type="text"></td></tr>
<tr><td>密碼:</td><td><input type="password"></td></tr>
<tr><td></td><td><input type="checkbox">記住密碼<input type="checkbox">自動登錄</td></tr>
<tr><td>性別：</td><td><input type="radio" name="sex">男<input type="radio" name="sex">女</td></tr>
<tr><td>家鄉</td><td><select>
<option value="1">亞洲</option>
<option value="2">歐洲</option>
<option value="3">非洲</option>
<option value="4">美洲</option>
</select></td></tr>
<tr><td>圖片：</td><td><input type="file"></td></tr>
<tr><td></td><td><input type="submit"> <input type="reset"></td></tr>
</table>
</form>
</body>
</html>
到這裏，最開始的流程圖的第一步算是已經完成了
