您好,登錄后才能下訂單哦!
<!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是從數字幾開始
<!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:復選框
? 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>
功能:
表單用于向服務器傳輸數據,從而實現用戶與Web服務器的交互
表單能夠包含input系列標簽,比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標簽。
表單屬性
屬性 | 描述 |
---|---|
accept-charset | 規定在被提交表單中使用的字符集(默認:頁面字符集)。 |
action | 規定向何處提交表單的地址(URL)(提交頁面)。 |
autocomplete | 規定瀏覽器應該自動完成表單(默認:開啟)。 |
enctype | 規定被提交數據的編碼(默認:url-encoded)。 |
method | 規定在提交表單時所用的 HTTP 方法(默認:GET)。 |
name | 規定識別表單的名稱(對于 DOM 使用:document.forms.name)。 |
novalidate | 規定瀏覽器不驗證表單。 |
target | 規定 action 屬性中地址的目標(默認:_self)。 |
表單元素
基本概念:
HTML表單是HTML元素中較為復雜的部分,表單往往和腳本、動態頁面、數據處理等功能相結合,因此它是制作動態網站很重要的內容。
表單一般用來收集用戶的輸入信息
表單工作原理:
訪問者在瀏覽有表單的網頁時,可填寫必需的信息,然后按某個按鈕提交。這些信息通過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理,如果有錯誤會返回錯誤信息,并要求糾正錯誤。當數據完整無誤后,服務器反饋一個輸入完成的信息。
點擊提交按鈕,input中type=submit的那個按鈕,然后就會將form表單中所有用戶輸入的內容或者選擇的內容({name屬性:值,})都發給服務端(以我們自己寫的那個socket舉例,打印一下接收的內容),但是所有的輸入標簽必須有一個叫做name的屬性。
發現跳到這個頁面了:看url的內容,有了我們輸入的內容,并且是給你組合起來的,name屬性值和你輸入的值組合到一起了,通過&符號分隔,并且在路徑那里加了個問號
打印一下socket接收的消息,你就發現已經接受到這些數據了
讓用戶選擇的,必須指定一個value值,要不然后端接收不到內容,用戶自己填寫的標簽,不需要指定value值
然后再點擊提交,后端打印一下接收的數據:
但是這樣并不好,因為url中顯示了你的信息,并且如果內容很多的話,你的地址欄不能夠輸入那么長的內容,為什么會默認拼接到url里面呢,因為form表單默認是get請求提交內容,我們可以改為post,來看看:post會把所有你提交的信息封裝到一個消息體里面,在瀏覽器上就看不到了,對于小白來說,看著安全一些。
點擊提交就跳到這個網址了:
在看后端打印的內容:
你會發現一個post請求:
把內容往后拉,就能看到咱們提交的數據了
那么你看,你的瀏覽器再你點擊提交的時候,獲取了你所輸入的內容,然后通過網絡提交給你的服務端代碼程序了。
然后我們后端通過提交過來的數據,來做某些事情,該驗證的驗證,該保存的保存
所以記住form表單里面有兩個屬性:action控制往哪里提交數據、method控制用什么方式提交。
注意:
form表單提交數據的時候,必須有個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>
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。