Javaweb基礎(chǔ)入門HTML之table與form
前章知識
HTML簡介:
超文本是一種組織信息的方式,它通過超級鏈接方法將文本中的文字、圖表與其他信息媒體相關(guān)聯(lián)。這些相互關(guān)聯(lián)的信息媒體可能在同一文本中,也可能是其他文件,或是地理位置相距遙遠(yuǎn)的某臺計(jì)算機(jī)上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機(jī)方式進(jìn)行連接,為人們查找,檢索信息提供方便
本節(jié)用到的單詞意思:
border: 邊框、邊界。
cellspacing:單元格間距、細(xì)胞間距
spacing:覆蓋
submit:提交
button:按鈕
font:字體
action:行動(dòng)
checked:選中的
option:選項(xiàng)
textarea:文本區(qū)
table的相關(guān)用法
表格 table
行 tr
列 td
表頭列:th
<table border="1" witdth="5" cellspacing="2.5" cellpadding="20"> <tr align="center" ><!--這表示行--> <!--border="1" witdth="5" cellspacing="2.5" cellpadding="10" 已經(jīng)被淘汰--> <th>姓名</th><!--這表示列--> <th>班級</th> <th>學(xué)號</th> </tr> <tr><!--這表示行--> <td>笑霸fianl</td> <td>4班</td> <td>001</td> </tr> <tr><!--這表示行--> <td>鐘鐘</td> <td>4班</td> <td>002</td> </tr> <tr><!--這表示行--> <td>刀刀</td> <td>4班</td> <td>003</td> </tr> <tr><!--這表示行--> <td>茂茂</td> <td>4班</td> <td>001</td> </tr> </table>
表格 table有如下屬性:
border:表格邊框的粗細(xì)
width:寬度
cellspacing:表格間距
cellpadding:表格填充
行 tr有如下屬性:
center(中),left(左默認(rèn)),right(右)
位置發(fā)生了變化。
form的相關(guān)用法
定義和用法
標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單。 表單能夠包含 input 元素,比如文本字段、復(fù)選框、單選框、提交按鈕等等。 表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。 表單用于向服務(wù)器傳輸數(shù)據(jù)。
輸入元素
文本域(Text Fields)
文本域通過<input type="text">
標(biāo)簽來設(shè)定,當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí),就會(huì)用到文本域。
<form> 昵稱:<input type="text" name="usr" value="請輸入你的昵稱"/><br /> </form>
瀏覽器顯示如下:
注意:表單本身并不可見。同時(shí),在大多數(shù)瀏覽器中,文本域的默認(rèn)寬度是 20 個(gè)字符。
密碼字段
密碼字段通過標(biāo)簽<input type="password">
來定義:
<form> 密碼:<input type="password" name="pwd"/> </form>
瀏覽器顯示效果如下:
注意:密碼字段字符不會(huì)明文顯示,而是以星號或圓點(diǎn)替代。
單選按鈕(Radio Buttons)
<input type="radio">
標(biāo)簽定義了表單單選框選項(xiàng)
<form> 性別:<input type="radio" name="iox" value="male" checked="checked"/>男 <input type="radio" name="iox" value="female" />女 <input type="radio" name="iox" value="both"/>雙性<br /> <!-- checked="checked"就是默認(rèn)選擇 可以省略為checked <input type="radio" name="iox" value="male" checked/>男 --> </form>
瀏覽器顯示效果如下:
復(fù)選框(Checkboxes) <input type="checkbox">
定義了復(fù)選框. 用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)。
<form> 愛好:<input type="checkbox" name="like" value="bsk" checked/>籃球 <input type="checkbox" name="like" value="pp" checked/>乒乓球 <input type="checkbox" name="like" value="fdb"/>足球 </form>
瀏覽器顯示效果如下:
提交按鈕(Submit Button)
<input type="submit">
定義了提交按鈕.
當(dāng)用戶單擊確認(rèn)按鈕時(shí),表單的內(nèi)容會(huì)被傳送到另一個(gè)文件。表單的動(dòng)作屬性定義了目的文件的文件名。由動(dòng)作屬性定義的這個(gè)文件通常會(huì)對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。:
<form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
瀏覽器顯示效果如下:
textarea:多行文本框
注意:
<textarea name="beizhu" rows="4" cols="50"></textarea> <textarea name="beizhu" rows="4" cols="50">這里不要輕易打回車 不然會(huì)有默認(rèn)的value值 </textarea>
備注:<br /><textarea name="beizhu" rows="4" cols="50"></textarea><br /> <input type="submit" value="注冊" /> <input type="reset" value="重置" />
綜合代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表單學(xué)習(xí)</title> <!-- 表單 form --> <form style="border:1px solid darkorchid" action="02表單02.html" > 昵稱:<input type="text" name="usr" value="請輸入你的昵稱"/><br /> 密碼:<input type="password" name="pwd"/><br /> 性別:<input type="radio" name="iox" value="male" checked="checked"/>男 <input type="radio" name="iox" value="female" checked/>女 <input type="radio" name="iox" value="both"/>雙性<br /> 愛好:<input type="checkbox" name="like" value="bsk" checked/>籃球 <input type="checkbox" name="like" value="pp" checked/>乒乓球 <input type="checkbox" name="like" value="fdb"/>足球 <br /> 生肖:<select> <option>鼠</option><option>牛</option><option>虎</option><option>兔</option> <option selected value="5">龍</option><option>蛇</option><option>馬</option><option>羊</option> <option>猴</option><option>雞</option><option>狗</option><option>豬</option> </select><br /> 備注:<br /><textarea name="beizhu" rows="4" cols="50"></textarea><br /> <input type="submit" value="注冊" /> <input type="reset" value="重置" /> </form> </head> <body> </body> </html>
效果如下:
到此這篇關(guān)于Javaweb基礎(chǔ)入門HTML之table與form的文章就介紹到這了,更多相關(guān)Javaweb table內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
java實(shí)現(xiàn)連連看游戲課程設(shè)計(jì)
這篇文章主要為大家詳細(xì)介紹了java實(shí)現(xiàn)連連看游戲課程設(shè)計(jì),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05使用Lucene實(shí)現(xiàn)一個(gè)簡單的布爾搜索功能
Lucene是一個(gè)全文搜索框架,而不是應(yīng)用產(chǎn)品。因此它并不像www.baidu.com 或者google Desktop那么拿來就能用,它只是提供了一種工具讓你能實(shí)現(xiàn)這些產(chǎn)品。接下來通過本文給大家介紹使用Lucene實(shí)現(xiàn)一個(gè)簡單的布爾搜索功能2017-04-04IDEA中設(shè)置代碼自動(dòng)提示為Alt+/的具體做法
很多公司都強(qiáng)制性要求使用Intellij?IDEA,其實(shí)Intellij?IDEA也確實(shí)很好用,但是一下子從Eclipse跳轉(zhuǎn)到Intellij?IDEA轉(zhuǎn)也是需要一段時(shí)間的,為了迎合之前的習(xí)慣,就需要在Intellij?IDEA中改變一些設(shè)置,如代碼自動(dòng)生成,本文給大家分享設(shè)置方法,感興趣的朋友一起看看吧2023-01-01spring AOP的After增強(qiáng)實(shí)現(xiàn)方法實(shí)例分析
這篇文章主要介紹了spring AOP的After增強(qiáng)實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了spring面向切面AOP的After增強(qiáng)實(shí)現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-01-01Spring Boot中單例類實(shí)現(xiàn)對象的注入方式
這篇文章主要介紹了Spring Boot中單例類實(shí)現(xiàn)對象的注入方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2021-08-08java版飛機(jī)大戰(zhàn)實(shí)戰(zhàn)項(xiàng)目詳細(xì)步驟
這篇文章主要為大家詳細(xì)介紹了java版飛機(jī)大戰(zhàn)實(shí)戰(zhàn)項(xiàng)目詳細(xì)步驟,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11