表單元素如何工作框往?
<form action="/abc" method="get">
</form>
action 說明了將表單表單發(fā)往何處。
method 說明了瀏覽器發(fā)送數(shù)據(jù)的方式如贷,一般是get和post方式,post把表單變量打包隱藏給后臺發(fā)送給服務器嫩海;get也是把表單變量打包,不過在它發(fā)送請求之前附加在url的末端部分霎烙。
在表單里可以添加什么?
<div class="username">
<label for="username">姓名:</label>
<input type="text" id="username" placeholder="用戶名" name="username">
</div>
text 類型的文本輸入框蕊连。placeholder屬性起文本提示作用
<div class="password">
<label for="password">密碼:</label>
<input type="password" id="password" name="password">
</div>
password 類型的文本輸入框
<div class="sex">
<label>性別:</label>
<input type="radio" name='sex' value="男" checked="checked" >男
<input type="radio" name="sex" value="女">女
</div>
輸入單選框
<div class="hobby">
<label>愛好:</label>
<input type="checkbox" name="hobby" value="data">data
<input type="checkbox" name="hobby" value="旅游" checked="checked">旅游
<input type="checkbox" name="hobby" value="寵物" checked="checked">寵物
</div>
輸入復選框悬垃, 其中checked="checked" 頁面呈現(xiàn)時為選中狀態(tài)
<div class="textarea">
<label>評論:</label>
<textarea name="contents"cols="30" rows="10">
ddd
</textarea>
長文本輸入框
<div class="mycar">
<label>我的car</label>
<select name="mycar">
<option value="寶馬">寶馬</option>
<option value="奔馳">奔馳</option>
<option value="薩博" selected>薩博</option>
</select>
</div>
選項列表
<input type="submit" value="提交">
submit 提交按鈕
最后展示效果
展示效果.png
其他
<input type="file" accept="image/png">
上傳文件 accept 這個確定了上傳的文件的屬性,比如這里的png格式圖片
<input type="button">
可點擊但不會提交表單
<input type="reset">
重置表單
表單中每個輸入控件都有一個name屬性:它在表單和處理表單的Web應用 程序之間建立連接甘苍。
自己按照上述步驟寫一個form表單尝蠕,,以get方式請求载庭。點擊提交按鈕看彼。
看瀏覽器上的url廊佩。
url.png
其實這是鍵值的方式。即key = value 而服務器收到的就是
username= 自己填寫的用戶名
password= 自己填寫的密碼
sex= 男
sex1= 女
hobby= 旅游
等等靖榕,标锄,如果仔細觀察就會發(fā)現(xiàn),key實際上就是name茁计,由此可知料皇,表單里name屬性絕對不能不寫,不寫就是白寫了星压。