form表单样式案例
生活随笔
收集整理的這篇文章主要介紹了
form表单样式案例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style type="text/css">* {margin: 0;padding: 0;font-size: large;}.all {height: 600px;width: 500px;background-color: #F5F5F5;margin: 0 auto;}.content {padding-top: 30px;height: 570px;width: 400px;margin: 0 auto;}.p1 {font-weight: bold;}.p2 {margin-left: 10px;}.m {margin-left: 30px;}.s {margin-left: 150px;}span {margin-left: 280px;text-align: right;}</style></head> <body><div class="all"><div class="content"><form action="" method="post" enctype="multipart/form-data"><span> *所在為必填項</span><p class="p1"> 個人信息?<img src="img/line.png" width="320px"></p><table cellspacing="10px"><tr><td>姓名*</td><td colspan="3"><input type="text"/></td></tr><tr><td>地址*</td><td colspan="3"><input type="text"/></td></tr><tr><td>出生*</td><td><select><option>1</option></select></td><td><select><option>Jan</option></select></td><td><select><option>1979</option></select></td></tr><tr><td>性別*</td><td colspan="3"><select><option>男</option></select></td></tr></table><p class="p1"> 其它信息?<img src="img/line.png" width="320px"></p><p class="p2"> 你喜歡這個表單嗎??<img src="img/line.png" width="220px"></p><input type="radio" name="habit" class="m">??喜歡<input type="radio" name="habit">不喜歡<br><p class="p2"> 你喜歡什么運動??<img src="img/line.png" width="245px"></p><input type="checkbox" name="sport" class="m">足球<input type="checkbox" name="sport">籃球<input type="checkbox" name="sport">籃球<br><p class="p2">請寫下你的建議?*?<img src="img/line.png" width="230px"></p><textarea cols="30" rows="10" class="m"></textarea><br><input type="submit" value="提交個人信息" class="s"></form></div> </div> </body> </html>截圖:
總結
以上是生活随笔為你收集整理的form表单样式案例的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: rs485数据线接反_终于有人把RS48
- 下一篇: 睡眠分期--深度学习算法