HTML设计显示表单
生活随笔
收集整理的這篇文章主要介紹了
HTML设计显示表单
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
HTML設計顯示表單
? ? ? ? ? ?表單中的元素很多，常用的有輸入框、文本框、單選項、復選項、下拉菜單和按鈕等等。
<span style="font-size:24px;"><from method="post"><p>請輸入您的姓名：<br><input type="text" name="name" id="name"></p><p>請選擇你最喜歡的顏色：<br><select name="color" id="color"><option value="red">紅</option><option value="green">綠</option><option value="blue">藍</option><option value="yellow">黃</option><option value="cyan">青</option><option value="purple">紫</option></select></p><p>請問你的性別：<br><input type="radio" name="sex" id="male" value="male">男<br><input type="radio" name="sex" id="female" value="female">女</p><p>你喜歡做些什么：<br><input type="checkbox" name="hobby" id="book" value="book">看書<input type="checkbox" name="hobby" id="net" value="net">上網(wǎng)<input type="checkbox" name="hobby" id="sleep" value=""sleep>睡覺</p><p>我要留言：<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p><p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"></p> </from></span>? ? ? ? ? ?使用CSS對表單添加樣式風格，包括邊框、背景色、寬度和高度等等。
<span style="font-size:24px;">form{border:1px dotted #AAAAAA;padding:3px 6px 3px 6px;margin:0px;font:14px Arial;}input{color:#00008B;background-color:#ADD8E6;border:1px solid #00008B;}select{width:80px;color:#00008B;background-color:#add8e6;border:1px solid #00008b;}textarea{width:200px;height:40px;bolor:#00008b;background-color:#add8e6;border:1px solid #00008b;}</span>? ? ? ? ? ?仔細觀察會發(fā)現(xiàn)，在IE中單選框和復選框都有邊框，但是，在Firefox中卻沒有。
因此，設計表單時的通常方法還是給具體的各項添加類別屬性，進行單獨的設置。
<span style="font-size:24px;"><html><head><title>表單</title><style><!--form{border:1px dotted #AAAAAA;padding:3px 6px 3px 6px;margin:0px;font:14px Arial;}input{color:#00008B;}input.txt{border:1px inset #00008b;background-color:#add8e6; }input.btn{bolor:#00008b;background-color:#add8e6;border:1px outset #00008b;padding:1px 2px 1px 2px;}--></style></head><body><from method="post"><p>請輸入您的姓名：<br><input type="text" name="name" id="name" class="txt"></p><p>請選擇你最喜歡的顏色：<br><select name="color" id="color"><option value="red">紅</option><option value="green">綠</option><option value="blue">藍</option><option value="yellow">黃</option><option value="cyan">青</option><option value="purple">紫</option></select></p><p>請問你的性別：<br><input type="radio" name="sex" id="male" value="male">男<br><input type="radio" name="sex" id="female" value="female">女</p><p>你喜歡做些什么：<br><input type="checkbox" name="hobby" id="book" value="book">看書<input type="checkbox" name="hobby" id="net" value="net">上網(wǎng)<input type="checkbox" name="hobby" id="sleep" value=""sleep>睡覺</p><p>我要留言：<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p><p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"></p> </from></body> </html></span>? ? ? ? ? ?進行單獨的CSS設置之后，兩個瀏覽器的顯示效果基本一致了，這種設計方法在實際設計中經(jīng)常使用。
? ? ? ? ? ?注意：各個瀏覽器之間的顯示差異，通常是因為瀏覽器對CSS屬性的默認值不同導致，因此，解決方法就是指定該值，而不讓瀏覽器使用默認值。
總結(jié)
以上是生活随笔為你收集整理的HTML设计显示表单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS添加多个背景图片
- 下一篇： HTML设计显示表格