1. 首頁 > 生活百科 > >

day02-HTML02( 二 )

生活百科day02-HTML02


  • <input type="password"> 定義密碼字段
  • <input type="text"> 定義用于文本輸入的單行輸入字段
  • 【day02-HTML02】<input type="submit"> 定義提交表單數據至表單處理程序的按鈕 。
  • <input type="radio"> 定義單選按鈕 ， 多個選擇中只能選擇一個選項
  • <input type="checkbox"> 定義復選框，復選框允許用戶在有限數量的選項中選擇零個或多個選項
  • <input type="number"> 用于應該包含數字值的輸入字段
  • <input type="button"> 定義按鈕
  • <input type="file" > 是文件上傳域
    day02-HTML02

    文章插圖

day02-HTML02

文章插圖
4.3.12select/option/textarea標簽
  • <select> 元素定義下拉列表
  • <option> 元素定義待選擇的選項，列表通常會把首個選項顯示為被選選項 。通過添加 selected 屬性來定義預定義選項
  • <textarea>元素定義多行輸入字段（文本域）

day02-HTML02

文章插圖
4.3.13表單綜合練習form 標簽就是表單input type=text 是文件輸入框value 設置默認顯示內容input type=password 是密碼輸入框 value 設置默認顯示內容input type=radio 是單選框 name 屬性可以對其進行分組checked="checked"表示默認選中input type=checkbox 是復選框 checked="checked"表示默認選中input type=reset 是重置按鈕 value 屬性修改按鈕上的文本input type=submit 是提交按鈕 value 屬性修改按鈕上的文本input type=button 是按鈕 value 屬性修改按鈕上的文本input type=file 是文件上傳域input type=hidden 是隱藏域 ， 當我們要發送某些信息，而這些信息，不需要用戶參與，就可以使用隱藏域（提交的時候同時發送給服務器）select 標簽是下拉列表框option 標簽是下拉列表框中的選項selected="selected"設置默認選中textarea 表示多行文本輸入框 （起始標簽和結束標簽中的內容是默認值）rows 屬性設置可以顯示幾行的高度cols 屬性設置每行可以顯示幾個字符寬度
1.一定要使用form標簽將input標簽包起來，且一定要給input元素設置name屬性，否則數據提交不到服務器
2.checkbox 是復選框 ， 如果希望是同一組 ， 就要保證 name 屬性一致
  1. checkbox ,select, radio 提交數據的時候是 value 屬性的值

day02-HTML02

文章插圖
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><form>用戶注冊信息<br/>用戶名稱：<input type="text" name="username"><br/>用戶密碼：<input type="password" name="pwd1"><br/>確認密碼：<input type="password" name="pwd2"><br/>請選擇你喜歡的運動項目:<input type="checkbox" name="sport" value="https://www.huyubaike.com/biancheng/lq">籃球<br/><input type="checkbox" name="sport" value="https://www.huyubaike.com/biancheng/zq" checked>足球<br/><input type="checkbox" name="sport" value="https://www.huyubaike.com/biancheng/sq" checked>手球<br/>請選中你的性別:<input type="radio" name="gender" value="https://www.huyubaike.com/biancheng/male" checked>男<br/><input type="radio" name="gender" value="https://www.huyubaike.com/biancheng/female">女<br/>請選中你喜歡的城市<select name="city"><option>--選擇--</option><option value="https://www.huyubaike.com/biancheng/sh">上海</option><option value="https://www.huyubaike.com/biancheng/bj">北京</option><option value="https://www.huyubaike.com/biancheng/gz">廣州</option></select><br/>自我介紹<textarea name="comment" rows="4" cols="25"></textarea><br/>請選中你的頭像文件<input type="file" name="myfile"><br/><input type="submit" name="提交" value="https://www.huyubaike.com/biancheng/提交"><input type="reset" name="重置" value="https://www.huyubaike.com/biancheng/重置"></form></body></html>
day02-HTML02

文章插圖
4.3.14表單格式化完成如下界面：
day02-HTML02

文章插圖
練習：使用表格標簽將表單格式化
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表單格式化</title></head><body><form><h1>用戶注冊信息</h1><table><tr><td>用戶名稱：</td><td><input type="text" name="username"></td></tr><tr><td>用戶密碼：</td><td><input type="password" name="pwd1"></td></tr><tr><td>確認密碼：</td><td><input type="password" name="pwd2"></td></tr><tr><td>請選擇你喜歡的運動項目：</td><td><input type="checkbox" name="sport" value="https://www.huyubaike.com/biancheng/lq">籃球<input type="checkbox" name="sport" value="https://www.huyubaike.com/biancheng/zq" checked>足球<input type="checkbox" name="sport" value="https://www.huyubaike.com/biancheng/sq" checked>手球</td></tr><tr><td>請選中你的性別：</td><td><input type="radio" name="gender" value="https://www.huyubaike.com/biancheng/male" checked>男<input type="radio" name="gender" value="https://www.huyubaike.com/biancheng/female">女</td></tr><tr><td>請選中你喜歡的城市：</td><td><select name="city"><option>--選擇--</option><option value="https://www.huyubaike.com/biancheng/sh">上海</option><option value="https://www.huyubaike.com/biancheng/bj">北京</option><option value="https://www.huyubaike.com/biancheng/gz">廣州</option></select></td></tr><tr><td>自我介紹：</td><td><textarea name="comment" rows="4" cols="25"></textarea></td></tr><tr><td>請選擇你的頭像文件：</td><td><input type="file" name="myfile"></td></tr><tr><td><input type="submit" name="提交" value="https://www.huyubaike.com/biancheng/提交"></td><td><input type="reset" name="重置" value="https://www.huyubaike.com/biancheng/重置"></td></tr></table></form></body></html>

推薦閱讀