溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <meta http-equiv="refresh" content="2;URL=http://www.baidu.com" charset="UTF-8">-->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>安河橋</title>
<link rel="stylesheet" href="">
<style></style>
</head>
<body>
<span><font size="33" color="yellow" >yfjs</font></span>
<div>
<div><font size="20" color="red">rsx</font></div>
<span><font size="30" color="orange" >大家都好</font></span>
</div>
<h2><font size="19" color="purple">rsx?>yf?<xy?</font></h2>
<p><font size="19" color="blue">rsx&"?'</font></p>
<p><font size="12" color="#ff4500">rsx??</font></p>
<p><font size="40" color="#adff2f"><p></font></p>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>RNG never give up</title>
<style>
.c1{
height: 1000px;
width: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div>RNG never give up</div>
<a name="top">RNG who is you winner</a><p></p>
<img src="1.jpg" alt="RNG" title="永不言棄" width="" height="">
<a href="https://image.baidu.com/search/index?tn=baiduima
ge&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=
1568021205974_R&pv=&ic=&nc=1&z=&hd=&latest=?right=&se=1&showtab=0&fb=0&width=&height=&face=0&i
stype=2&ie=utf-8&sid=&word=rng%E5%A3%81%E7%BA%B8&f=3&oq=rng&rsp=0" target="_blank">RNG圖片</a>
<div class="c1"></div>
<a href="#top">回到頂部</a>
</body>
</html>target：
1.無序列表
type屬性：
2.有序列表
type屬性： start是從數(shù)字幾開始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul type="square">
<li>rsx</li>
<li>yf</li>
<li>xy</li>
</ul>
<ol type="I" start="10">
<li>rsx</li>
<li>yf</li>
<li>xy</li>
</ol>
</body>
</html>屬性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="51" cellpadding="10" cellspacing="10">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>hobby</th>
</tr>
</thead>
<tbody>
<tr>
<td>rsx</td>
<td>13</td>
<td>Python</td>
</tr>
<tr>
<td>yf</td>
<td>12</td>
<td>--</td>
</tr>
<tr>
<td>xy</td>
<td>14</td>
<td>GO</td>
</tr>
</tbody>
</table>type屬性:
? text:普通文本輸入框
? password:密文
? date:日期選擇框
? radio:單選框
? checkbox:復(fù)選框
? submit:提交按鈕
? button:普通按鈕
? reset:重置
? file:文件上傳
? hidden:隱藏input框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="hidden">
用戶名:<input type="text">
密碼:<input type="password">
<input type="radio" name="sex" value="1" >男
<input type="radio" name="sex" value="2" checked>女
<input type="checkbox" name="hobby" value="1">1
<input type="checkbox" name="hobby" value="2">2
<input type="checkbox" name="hobby" value="3">3
<input type="checkbox" name="hobby" value="4" checked>4
<div>
<input type="date">
</div>
<div>
<input type="file">
</div>
</body>
</html>功能：
表單用于向服務(wù)器傳輸數(shù)據(jù)，從而實現(xiàn)用戶與Web服務(wù)器的交互
表單能夠包含input系列標(biāo)簽，比如文本字段、復(fù)選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標(biāo)簽。
表單屬性
| 屬性 | 描述 |
|---|---|
| accept-charset | 規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁面字符集）。 |
| action | 規(guī)定向何處提交表單的地址（URL）（提交頁面）。 |
| autocomplete | 規(guī)定瀏覽器應(yīng)該自動完成表單（默認(rèn)：開啟）。 |
| enctype | 規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）。 |
| method | 規(guī)定在提交表單時所用的 HTTP 方法（默認(rèn)：GET）。 |
| name | 規(guī)定識別表單的名稱（對于 DOM 使用：document.forms.name）。 |
| novalidate | 規(guī)定瀏覽器不驗證表單。 |
| target | 規(guī)定 action 屬性中地址的目標(biāo)（默認(rèn)：_self）。 |
表單元素
基本概念：
HTML表單是HTML元素中較為復(fù)雜的部分，表單往往和腳本、動態(tài)頁面、數(shù)據(jù)處理等功能相結(jié)合，因此它是制作動態(tài)網(wǎng)站很重要的內(nèi)容。
表單一般用來收集用戶的輸入信息
表單工作原理：
訪問者在瀏覽有表單的網(wǎng)頁時，可填寫必需的信息，然后按某個按鈕提交。這些信息通過Internet傳送到服務(wù)器上。
服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進行處理，如果有錯誤會返回錯誤信息，并要求糾正錯誤。當(dāng)數(shù)據(jù)完整無誤后，服務(wù)器反饋一個輸入完成的信息。
點擊提交按鈕，input中type=submit的那個按鈕，然后就會將form表單中所有用戶輸入的內(nèi)容或者選擇的內(nèi)容（{name屬性:值，}）都發(fā)給服務(wù)端（以我們自己寫的那個socket舉例，打印一下接收的內(nèi)容），但是所有的輸入標(biāo)簽必須有一個叫做name的屬性。
發(fā)現(xiàn)跳到這個頁面了：看url的內(nèi)容，有了我們輸入的內(nèi)容，并且是給你組合起來的，name屬性值和你輸入的值組合到一起了，通過&符號分隔，并且在路徑那里加了個問號
打印一下socket接收的消息，你就發(fā)現(xiàn)已經(jīng)接受到這些數(shù)據(jù)了
讓用戶選擇的，必須指定一個value值，要不然后端接收不到內(nèi)容，用戶自己填寫的標(biāo)簽，不需要指定value值
然后再點擊提交，后端打印一下接收的數(shù)據(jù)：
但是這樣并不好，因為url中顯示了你的信息，并且如果內(nèi)容很多的話，你的地址欄不能夠輸入那么長的內(nèi)容，為什么會默認(rèn)拼接到url里面呢，因為form表單默認(rèn)是get請求提交內(nèi)容，我們可以改為post，來看看：post會把所有你提交的信息封裝到一個消息體里面，在瀏覽器上就看不到了，對于小白來說，看著安全一些。
點擊提交就跳到這個網(wǎng)址了：
在看后端打印的內(nèi)容：
你會發(fā)現(xiàn)一個post請求：
把內(nèi)容往后拉，就能看到咱們提交的數(shù)據(jù)了
那么你看，你的瀏覽器再你點擊提交的時候，獲取了你所輸入的內(nèi)容，然后通過網(wǎng)絡(luò)提交給你的服務(wù)端代碼程序了。
然后我們后端通過提交過來的數(shù)據(jù)，來做某些事情，該驗證的驗證，該保存的保存
所以記住form表單里面有兩個屬性：action控制往哪里提交數(shù)據(jù)、method控制用什么方式提交。
注意：
form表單提交數(shù)據(jù)的時候，必須有個submit按鈕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="hidden">
用戶名:<input type="text">
密碼:<input type="password">
<input type="radio" name="sex" value="1" >男
<input type="radio" name="sex" value="2" checked>女
<input type="checkbox" name="hobby" value="1">1
<input type="checkbox" name="hobby" value="2">2
<input type="checkbox" name="hobby" value="3">3
<input type="checkbox" name="hobby" value="4" checked>4
<div>
<input type="date">
</div>
<div>
<input type="file">
</div>
</body>
</html>免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼