溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“html form表單的概述和用法”，在日常操作中，相信很多人在html form表單的概述和用法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”html form表單的概述和用法”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
一，表格標(biāo)簽
–1，概述
–2，總結(jié)
二，表單標(biāo)簽
–1，測試
–2，總結(jié)
–3，form提交數(shù)據(jù)
三，form表單的練習(xí)
四，CSS
-1，概述
-2，語法
-3，入門案例
五，選擇器
總結(jié)
向網(wǎng)頁中加入表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試 表格標(biāo)簽</title> </head> <body> <!-- 展示一個3行3列的表格 --> <!-- table是表格標(biāo)簽，bgcolor設(shè)置背景色 width是表格的寬度 border是表格的邊框 cellspacing是單個元的間距 --> <table bgcolor="pink" width="300px" border="1px" cellspacing="0"> <tr> <!-- tr是表里的行 --> <td colspan="2">11</td> <!-- colspan合并列 --> <td>13</td><!-- td是行里的列 --> </tr> <tr> <td>21</td> <td>22</td> <td rowspan="2">23</td> <!-- colspan合并行--> </tr> <tr> <td>31</td> <td>32</td> </tr> </table> </body> </html>
table 標(biāo)簽用來表示表格
tr 標(biāo)簽表示表里的一行
td 標(biāo)簽表示行里的列
border 設(shè)置邊框
cellspacing 設(shè)置單元格的間距
bgcolor 設(shè)置背景色
width 設(shè)置寬度
height 設(shè)置高度
colspan 合并列
rowspan 合并行
用來提交數(shù)據(jù)，本質(zhì)上就是在一個表格標(biāo)簽的外面用form包起來
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試 表單標(biāo)簽</title> </head> <body> <form> <table border="1px" bgcolor="lightgrey" bordercolor="red" cellspacing="0"> <tr> <td colspan="2"> <h2 align="center">注冊表單</h2> </td> </tr> <tr> <td>用戶名：</td> <td> <input type="text" /> </td> </tr> <tr> <td>密碼：</td> <td> <input type="password" /> </td> </tr> <tr> <td>確認(rèn)密碼：</td> <td> <input type="password" /> </td> </tr> <tr> <td>昵稱：</td> <td> <input type="text" /> </td> </tr> <tr> <td>郵箱：</td> <td> <input type="email" /> </td> </tr> <tr> <td>性別：</td> <td> <input type="radio" />男 <input type="radio" />女 </td> </tr> <tr> <td>愛好：</td> <td> <input type="checkbox" />籃球 <input type="checkbox" />足球 <input type="checkbox" />乒球 </td> </tr> <tr> <td>城市：</td> <td> <select> <option>北京</option> <option>上海</option> <option>山東</option> <option>東北</option> </select> </td> </tr> <tr> <td>頭像：</td> <td> <input type="file" /> </td> </tr> <tr> <td>驗(yàn)證碼：</td> <td> <input type="text" /> <img src="a.png"> <input type="button" value="點(diǎn)我換一張" /> </td> </tr> <tr> <td>自我描述：</td> <td> <textarea>請輸入自我描述~~</textarea> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="提交"/> <input type="button" value="重置"/> </td> </tr> </table> </form> </body> </html>
form標(biāo)簽用來提交表單里的數(shù)據(jù)
table標(biāo)簽用來實(shí)現(xiàn)表格
tr標(biāo)簽用來表示表格里的行
td標(biāo)簽表示行里的列
img標(biāo)簽表示插入圖片
select標(biāo)簽表示下拉框，option是下拉選項(xiàng)
textarea標(biāo)簽是文本域
input表示輸入框，類型很豐富
text類型是普通的文本輸入框
password是密碼輸入框
email是郵箱的輸入框
file是上傳文件
radio是單選框
checkbox是多選框
button是普通的按鈕
submit是提交按鈕，比button多了數(shù)據(jù)提交的功能
align屬性用來設(shè)置元素的位置center是居中
bordercolor設(shè)置邊框的顏色
–1，提交按鈕必須submit類型，不然不會提交數(shù)據(jù)的
–2，哪些數(shù)據(jù)需要提交的話，必須在網(wǎng)頁上配置name屬性
–3，提交的數(shù)據(jù)都在地址欄中展示 http://127.0.0.1:8848/cgb2105/html4.html?username=1314
username=1314 ，其中username是頁面中name屬性的值，1314是網(wǎng)頁中輸入的數(shù)據(jù)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測試 表單標(biāo)簽</title> </head> <body> <!-- 默認(rèn)會把數(shù)據(jù)在地址欄中拼接，，，，，GET方式提交數(shù)據(jù) http://127.0.0.1:8848/cgb2105/html4.html?username=1&pwd=2&repwd=2 GET方式提交數(shù)據(jù)：好處是展示的效果明確，壞處是不安全，地址欄太長 POST方式提交數(shù)據(jù)：好處是安全對數(shù)據(jù)的大小沒上線，壞處是看不見數(shù)據(jù) --> <form method="post" action="http://www.baidu.com"> <table border="1px" bgcolor="lightgrey" bordercolor="red" cellspacing="0"> <tr> <td colspan="2"> <h2 align="center">注冊表單</h2> </td> </tr> <tr> <td>用戶名：</td> <td> <input type="text" name="username"/> </td> </tr> <tr> <td>密碼：</td> <td> <input type="password" name="pwd"/> </td> </tr> <tr> <td>確認(rèn)密碼：</td> <td> <input type="password" name="repwd" /> </td> </tr> <tr> <td>昵稱：</td> <td> <input type="text" name="nick"/> </td> </tr> <tr> <td>郵箱：</td> <td> <input type="email" name="mail" /> </td> </tr> <tr> <td>性別：</td> <td> <!-- radio是單選，擁有相同的name值才能實(shí)現(xiàn)單選，不然就是雙選了 必須設(shè)置value屬性，否則永遠(yuǎn)提交on --> <input type="radio" name="sex" value="1"/>男 <input type="radio" name="sex" value="0"/>女 </td> </tr> <tr> <td>愛好：</td> <td> <!-- 擁有相同的name值，必須設(shè)置value屬性否則提交的是on --> <input type="checkbox" name="like" value="1"/>籃球 <input type="checkbox" name="like" value="2"/>足球 <input type="checkbox" name="like" value="3"/>乒乒球 </td> </tr> <tr> <td>城市：</td> <td> <!-- 配置value屬性，否則提交的是漢字，網(wǎng)絡(luò)傳輸時字符串沒有數(shù)字快 --> <select name="city"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">山東</option> <option value="4">東北</option> </select> </td> </tr> <tr> <td>頭像：</td> <td> <input type="file" name="head"/> </td> </tr> <tr> <td>驗(yàn)證碼：</td> <td> <input type="text" name="code" /> <img src="a.png"> <input type="button" value="點(diǎn)我換一張" /> </td> </tr> <tr> <td>自我描述：</td> <td> <textarea>請輸入自我描述~~</textarea> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="提交"/> <input type="button" value="重置"/> </td> </tr> </table> </form> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>練習(xí)form表單</title> </head> <body> <!-- 默認(rèn)的數(shù)據(jù)提交是get方式 --> <form> <table> <tr> <td> <h4>學(xué)生信息管理系統(tǒng)MIS</h4> </td> </tr> <tr> <td> 姓名： </td> </tr> <tr> <td> <input type="text" placeholder="請輸入姓名" name="user" /> </td> </tr> <tr> <td> 年齡： </td> </tr> <tr> <td> <input type="number" placeholder="請輸入年齡" name="age" /> </td> </tr> <tr> <td> 性別：(單選框) <input type="radio" name="sex" value="1"/>男 <input type="radio" name="sex" value="0"/>女 </td> </tr> <tr> <td> 愛好：(多選) <input type="checkbox" name="like" value="1"/>乒乓球 <input type="checkbox" name="like" value="2"/>爬山 <input type="checkbox" name="like" value="3"/>唱歌 </td> </tr> <tr> <td> 學(xué)歷：(下拉框) <select name="edu"> <option value="1">本科</option> <option value="2">?？?lt;/option> <option value="3">高中</option> <option value="4">小學(xué)</option> </select> </td> </tr> <tr> <td> 入學(xué)日期： <br/> <input type="date" name="time"/> </td> </tr> <tr> <td> <input type="submit" value="保存" /> <input type="button" value="取消" /> </td> </tr> </table> </form> </body> </html>
用來修飾網(wǎng)頁的，變得好看。層疊樣式表stylesheet
td{ text-align : center; } 選擇器{ 屬性名 : 屬性值 ; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試 css修飾網(wǎng)頁</title>
<!-- css寫法2：內(nèi)部css，插入css代碼 -->
<style>
/* 語法：選擇器{ 屬性名:屬性值; } */
/* 給所有div */
div{
color:green; /* 設(shè)置字的顏色紅色 */
background-color: #008000;/* 設(shè)置背景色 */
}
</style>
</head>
<body>
<!-- css寫法1：行內(nèi)css-->
<div >我是div1</div>
<div >我是div2</div>
<div >我是div3</div>
<div>我是div4</div>
<div>我是div5</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試 css的選擇器</title>
<!-- style向HTML中嵌入css代碼 -->
<style>
/* 1. 標(biāo)簽名選擇器： */
/* 練習(xí)1：選中標(biāo)簽名叫div的所有元素*/
div{
background-color: #008000; /* 設(shè)置背景色 */
color: black; /* 設(shè)置字的顏色*/
font-size: 30px ; /* 設(shè)置字號 */
font-family: "宋體" ; /* 設(shè)置字體 */
}
/* 練習(xí)2：選中標(biāo)簽名叫input的所有元素*/
input{
background-color: pink; /* 設(shè)置背景色 */
}
/* 2. class選擇器：先設(shè)置class屬性 + 通過.獲取class的值 */
.a{ /* 選中網(wǎng)頁中所有class=a的元素們，其中class的值可以重復(fù)*/
color: yellow;/* 字的顏色 */
}
/* 3. id選擇器：先設(shè)置id屬性 + 通過#獲取id的值 */
#x{ /* 選中網(wǎng)頁中id=x的元素，由于id的值不能相同，所以只選中了一個元素*/
font-size: 100px; /* 加大字號 */
}
</style>
</head>
<body>
<!-- div span p input -->
<div class="a">我是div1</div>
<div id="x">我是div2</div>
<div id="y">我是div3</div>
<span class="a">我是span1</span>
<span>我是span2</span>
<p class="a">我是p</p>
<input type="text" placeholder="我是input1"></input>
<input type="text" placeholder="我是input2"></input>
</body>
</html>到此，關(guān)于“html form表單的概述和用法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼