C# WPF 建立無邊框（標題欄）的登入視窗的示例
阿新 • • 發佈：2020-12-15
技術標籤：html
表單語法
<form action="result.html" method="post">
<input type="..." name="..." value="...">
</form>
action表示向何處傳送表單資料
method規定如何傳送表單資料，常用值：get/post
表單元素格式
| 屬性 | 說明 |
|---|---|
| type | 指定元素的型別。text，password，checkbox，radio，submit，reset，file，email，url，image，button，search，textarea，hidden，預設為text |
| name | 指定表單元素名稱 |
| value | 元素的初始值，type為radio時必須指定一個值 |
| size | 指定表單元素的初始寬度。當 type 為 text 或 password時，表單元素的大小以字元為單位。對於其他型別，寬度以畫素為單位 |
| maxlength | type為text 或 password 時，輸入的最大字元數 |
| checked | type為radio或checkbox時，指定按鈕是否是被選中 |
表單元素
1、文字框
程式碼：
<input type="text" name="userName" value="chenxingjies" size 網頁效果圖：
2、密碼框
程式碼：
<input type="password" name="password" maxlength="20"/>
網頁效果圖：
3、單選按鈕
程式碼：
<input type="radio" name="gender" value="男" checked>男
<input type="radio" name="gender" value 網頁效果圖：
4、複選框
程式碼：
<input type="checkbox" name="interest" value="sports"/>運動
<input type="checkbox" name="interest" value="talk" checked/>聊天
<input type="checkbox" name="interest" value="play"/>玩遊戲
網頁效果圖：
5、列表框
程式碼：
<select name="job">
<option value="teacher">教師</option>
<option value="student">學員</option>
<option value="worker">工人</option>
<option value="encourager">鼓勵師</option>
<option value="wise" selected>巫師</option>
<input type="submit">
</select>
網頁效果圖：
6、按鈕
重置按鈕
程式碼：
<input type="reset" name="butreset" value="重置"/>
網頁效果圖：
提交按鈕
<input type="submit" name="butsubmit" value="提交"/>
網頁效果圖：
普通按鈕
程式碼：
<input type="button" name="butButton" value="按鈕"/>
網頁效果圖：
圖片按鈕
程式碼：
<input type="image" src="img/img1.png"/>
網頁效果圖：
圖片就是一個按鈕的作用
7、多行文字域
程式碼：
<textarea name="showtext" cols="10" rows="10">文字內容</textarea>
網頁效果圖：
8、檔案域
程式碼：
<form action="#" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上傳" /></p>
</form>
網頁效果圖：
9、郵箱
程式碼：
<p>郵箱：<input type="email" name="email"/></p>
網頁效果圖：
會自動驗證email地址格式是否正確
10、網址
程式碼：
<p>請輸入你的網址：<input type="url" name="userUrl"/>
<input type="submit"/></p>
網頁效果圖：
會自動驗證URL地址格式是否正確
11、數字
程式碼：
<p>請輸入數字：<input type="number" name="num" min="0" max="100" step="10"/>
<input type="submit"/></p>
網頁效果圖：
12、滑塊
程式碼：
<p>請輸入數字：<input type="range" name="range1" min="0" max="10" step="2"/>
<input type="submit"/></p>
網頁效果圖：
13、搜尋框
程式碼：
<p>請輸入搜尋的關鍵詞：<input type="search" name="sousuo"/>
<input type="submit"/></p>
網頁效果圖：
