HTML/JSP_上古互聯(lián)網(wǎng)時期，天地混沌，前后端尚未分離，霓虹正是此未開化狀態(tài)20230422

# HTML/JSP_上古互聯(lián)網(wǎng)時期，天地混沌，前后端尚未分離霓虹的IT是這種未開化的狀態(tài)20230421

開篇吐槽：

HTML/JSP_上古互聯(lián)網(wǎng)時期，天地混沌，前后端尚未分離，而霓虹的IT就是這種未開化的狀態(tài)，依舊通過非物質文化遺產JSP技術進行數(shù)據(jù)庫的管理，正是為了累死開發(fā)。20230421_卒

## 一、表單塊元素語法form_method action

### 1. form開始標簽 method="post|get" 表單提交方式 必須

post|get ：規(guī)定如何發(fā)送表單數(shù)據(jù)常用值

### 2.? form開始標簽 action：表示向何處發(fā)送表單數(shù)據(jù) 必須

action=""必填 表單信息提交的位置，可以是網(wǎng)站 也可以是一個請求 處理地址

### 3.示例表單

## 4.輸入框input及其指定類型type

form method action >input type=text/radio>? 等?

form表單元素內_指定input輸入框元素類型type為文本框text/單選框radio等屬性

### 1. form表單元素內各元素的格式

屬性|說明

--|--

type|指定input輸入框元素的類型。text文本框,password密碼框、checkbox多選框、radio單選框、submit提交按鈕、reset重置按鈕, file文件, hidden隱藏, image圖片 和 button, 默認為 text類型的文本輸入框

name必須|指定表單元素的名稱，尤其是設置單選框時

value|元素的初始值。type 元素類型 為radio單選框時必須指定一個值

size|指定表單元素的初始寬度。當 type 為text或password時，表單元素的大小以字符為單位。對于其他類型，寬度以像素為單位

maxlength|type為text或 password 時,輸入的最大字特數(shù)

checked|type為radio或checkbox時，指定按鈕是否是被選中

### 1. 單選效果的實現(xiàn)：

1. 將文本框類型為單選框的兩個性別radio單選框放在一個p標簽元素塊中

2. 在單選框設置相同的name元素名稱，使男女單選框都同屬于gender單選組內

3. 設置value元素的為數(shù)據(jù)提交的初始數(shù)據(jù)值 type元素類型為radio單選框時必須指定一個值

? ?## 二、

###? ? 1. 單選框 redio? checked

###? ? 2. 多選框 checkbox checked

###? ? 3. 下拉框 select_option_selected

###? ? 4. 文本域 textarea

###? ? 5. 文件域? type file

###? ? 6. 數(shù)字? type number

###? ? 7. 郵箱 type email

###? ? 8. 滑塊 type range

###? ? 9. 搜索框 type search

## 三、HTML表單插播：切換服務器視角

- 根據(jù)客戶網(wǎng)頁端的提交的表單數(shù)據(jù)，如何儲存到數(shù)據(jù)庫進行管理呢？

HTML只是一種標記語言，不具備編程功能，因此以Java語言來寫指令，進行數(shù)據(jù)庫的操作。而在HTML中使用Java代碼更是不可行的。

### （一）分支選項 結局一：JSP?

HTML/JSP_上古互聯(lián)網(wǎng)時期，天地混沌，前后端尚未分離，而霓虹的IT就是這種未開化的狀態(tài)，依舊通過非物質文化遺產JSP技術進行數(shù)據(jù)庫的管理，直接在Web頁面中嵌入動態(tài)的Java代碼，

### 1、JavaServer Pages（JSP）

1. JSP是一種基于Java的Web頁面技術，它允許開發(fā)人員在HTML頁面中嵌入Java代碼，從而動態(tài)生成頁面內容。

2. 在JSP中，Java代碼被包含在<% %>標記中。

3. 例：一個簡單的JSP頁面，讓它從MySQL數(shù)據(jù)庫中獲取數(shù)據(jù)并在Web頁面上顯示。

---

---

### （二）分支選項 結局二 Java Servlet

前后端分離Java Servlet技術

1. 設置Java環(huán)境和MySQL數(shù)據(jù)庫的正常連接。可以使用JDBC連接MySQL數(shù)據(jù)庫。

2. 在MySQL數(shù)據(jù)庫中創(chuàng)建一個表來存儲提交的文本表單數(shù)據(jù)。例如，可以創(chuàng)建一個名為“form_data”的表，該表包含列“id”（作為主鍵）、“name”、“email”和“age”。

3. 在網(wǎng)頁前端，創(chuàng)建一個表單form，其中包含要提交的文本數(shù)據(jù)。確保表單的提交方式為“POST”。

4. 在Java應用程序中，使用Servlet來處理表單提交。在Servlet中，使用JDBC連接到MySQL數(shù)據(jù)庫，并將提交的表單數(shù)據(jù)插入到“form_data”表中。

### 1. SQL注入 數(shù)據(jù)注入?

SQL注入是一種常見的網(wǎng)絡攻擊方式，攻擊者通過構造惡意SQL語句來實現(xiàn)對數(shù)據(jù)庫的非授權訪問和操作。

### 2. SQL注入示例

假設有一個登錄頁面，用戶輸入用戶名和密碼，然后頁面將用戶名和密碼提交到后臺進行驗證：

```java

String sql = "SELECT * FROM users WHERE username='" + username + "' AND password='" + password + "'";

ResultSet rs = stmt.executeQuery(sql);

```

攻擊者可以在用戶名和密碼的輸入框中輸入惡意的SQL語句，例如在用戶名輸入框中輸入 ' OR 1=1--，密碼輸入框中隨意輸入，那么構造出的SQL語句如下：

```java

SELECT * FROM users WHERE username='' OR 1=1--' AND password=''

```

sql注入解決：

使用PreparedStatement來代替Statement，PreparedStatement支持參數(shù)化查詢，可以將參數(shù)的值與SQL語句進行分離，從而避免了惡意參數(shù)的注入，以下是一個使用PreparedStatement進行查詢的示例代碼：

```java?

String sql = "SELECT * FROM users WHERE username=? AND password=?";

PreparedStatement pstmt = conn.prepareStatement(sql);

pstmt.setString(1, username);

pstmt.setString(2, password);

ResultSet rs = pstmt.executeQuery();

```

pstmt使用了參數(shù)化查詢，將查詢條件的值與SQL語句進行了分離，使得惡意參數(shù)無法注入到SQL語句中，從而避免了SQL注入攻擊的風險。