一天搞定CSS：表单（form）--20
生活随笔
收集整理的這篇文章主要介紹了
一天搞定CSS：表单（form）--20
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.表單標簽
2.input標簽屬性與取值
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><!--表單標簽form input取值：text---文本框password---密碼框radio---單選框checkbox---復選框（又稱多選框）submit---提交按鈕reset---重置按鈕button---自定義按鈕image---圖片按鈕file---上傳文件按鈕hidden---隱藏--><form action="http://www.apeclass.com/"><p><input type="text" name="userName" value="用戶名" /></p><p><input type="password" name="passWord" /></p><p><input type="radio" name="sex" value="men" />男<input type="radio" name="sex" value="women" />女</p><p><input type="checkbox" name="interest" value="eat" />吃飯<input type="checkbox" name="interest" value="sleep" />睡覺<input type="checkbox" name="interest" value="play" />打豆豆</p><p><input type="submit" value="提交按鈕" /><input type="reset" value="重置按鈕" /></p><p><input type="button" value="自定義按鈕" /><input type="image" src="img/img_01.gif" /></p><p><input type="file" name="img" /></p><p><input type="hidden" /></p></form></body> </html>效果圖
3.label標簽
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><!--label用來輔助input，點擊label后能夠讓對應的input變成可輸入的狀態for屬性里放的是對應input的id--><p><label for="userName">用戶名：</label><input type="text" id="userName" /></p><p><label for="pw" >密碼：</label><input type="password" id="pw" /></p><p><label for="number">手機號：</label><input type="text" id="number" /></p></body> </html>4.checked默認選中
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><!--checked 讓表單一上來有一個默認選中的狀態--><p><input type="radio" name="sex" value="men" />男<input type="radio" name="sex" value="women" checked="checked" />女</p><p><input type="checkbox" name="interest" value="eat" />吃飯<input type="checkbox" name="interest" value="sleep" />睡覺<input type="checkbox" name="interest" value="play" checked="checked" />打豆豆</p></body> </html>5.disabled和readonly
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><!--disabled 禁止用戶輸入，并且這個表單不會被提交readonly 讓表單變成只讀狀態，這個表單會被提交--><form action="http://www.apeclass.com/"><p><label for="userName">用戶名：</label><input type="text" name="userName" value="kaivon" disabled="disabled" /></p><p><label for="pw" >密碼：</label><input type="password" name="pw" value="123" readonly="readonly" /></p><p><label for="number">手機號：</label><input type="text" name="number" /></p><input type="submit" /></form></body> </html>效果圖
6.下拉框和文本域
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>form{margin: 0; /*IE6下會有一個margin*/}input{margin: 0;padding: 0;outline: none;}textarea{margin: 0;padding: 0;resize: none;overflow: auto;/*清除輪廓邊框，* 不清除時，鼠標點擊文本域時，會看到一個略微放大的效果* * 你也可以設置一個outline看一下效果，如下* /*outline: 5px solid red;*/* */outline: none;border: 1px solid blue;}</style></head><body><form action="http://www.baidu.com/"><select name="area"><option>北京</option><option selected="selected">上海</option><option>廣州</option></select><input type="submit" /><!--style="width: 300px; height: 300px;"--><textarea name="text" id="" rows="5" cols="100"></textarea></form></body> </html>總結
以上是生活随笔為你收集整理的一天搞定CSS：表单（form）--20的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【小练习03】CSS-表格（table）
- 下一篇： CSS自学教程--一天搞定CSS（终篇总