HTML學習之表單
阿新 • • 發佈:2019-02-17
20170528_表單學習
今天學習的是關於表單的部分,記下自己的學習進度,留下自己學習痕跡。
<from></from>建立表單所有表單內容都寫在這裡面
<input/>建立文欄位,單/複選框,按鈕等等
<h3>密碼框</h3>
<labelfor="pwd">密碼</label>
<inputid="pwd"name="pwd"type="password"value="1"maxlength="6">
文字框和密碼框寫法基本一致。
Lable :指表單控制元件獲得焦點
Lable 裡的for=” ”和input裡的
Maxlength=”n”表示最大輸入個數為n
Checked 表示預設選擇項
Value=”n” 表示被選項向伺服器返回的值為n;
Type 指定元素的型別:text,password,checkbox,radio,file....
<select></select>建立下拉列表
Size 選項的數目,multiple可選擇多個選項
Value 選項的值,selected預設選項
<selectname="Book"size="1">
<optionvalue="1">歷史</option>
<
<optionvalue="3"selected="selected">小說</option>
</select>
<textrea></textrea>定義多行文字區
Cols 文字區可見寬度,rows文字區可見行數,
Disabled 禁用該文字 ,readonly文字區為只讀
<h3>多行文字域</h3>
<textareaname="火影"cols="30"rows="5"readonly="readonly">這是一個忍者的世界,並不是我們所認為的黑暗,而是充滿著陽光與希望!火影裡帶給我最多的就是感動,更是讓我知道了有一種名為努力型的天才!
</textarea>
自己做的關於表單的練習:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單的使用</title>
</head>
<body>
<form>
<h3>文字框</h3>
<!--for和id的值要相等-->
<label for="name">姓名:</label>
<!--maxlength表示最大輸入個數為6個-->
<input id="name" name="name" type="text" value="請輸入姓名" maxlength="6">
<h3>密碼框</h3>
<label for="pwd">密碼</label>
<input id="pwd" name="pwd" type="password" value="1" maxlength="6">
<h3>複選框</h3>
<!--checked表示預設的一項-->
<input name="Subject" type="checkbox" value="1" checked="checked"> HTML
<input name="Subject" type="checkbox" value="1" > Css
<input name="Subject" type="checkbox" value="1" > Java
<h3>單項按鈕</h3>
<input name="sex" type="radio" value="male" checked="checked">男
<input name="sex" type="radio" value="female">女
<h3>檔案域</h3>
請選擇檔案:<input name="file" type="file">
<h3>按鈕</h3>
<input type="button" value="普通按鈕"><br>
<input type="submit" value="提交按鈕"><br>
<input type="reset" value="重置按鈕">
<p>最後來個圖片按鈕</p>
<input type="image" value="" src="images/timg.gif" width="50px" height="50px">
<h3>下拉列表</h3>
<select name="Book" size="1" >
<option value="1">歷史</option>
<option value="2">文學</option>
<option value="3"selected="selected">小說</option>
</select>
<h3>多行文字域</h3>
<textarea name="火影" cols="30" rows="5" readonly="readonly">這是一個忍者的世界,並不是我們所認為的黑暗,而是充滿著陽光與希望!火影裡帶給我最多的就是感動,更是讓我知道了有一種名為努力型的天才!
</textarea>
</form>
</body>
</html>