前端入門-html 表單

言

前面已經學習相關html大部分知識，基本上可以制作出簡單的頁面，但是這些頁面都是靜態的，一個網站如果要實現用戶的互動交流，這時表單就起到關鍵的作用，表單的用途很多，它主要用來收集用戶的相關信息，是網頁具有交互的功能。例如，用戶注冊登錄，留言等。

下面會詳細介紹表單的使用方法，有以下內容：

表單標簽form的使用
表單控件使用

表單標簽 —— form

使用<form></form>標簽來創建一個表單，在其之間就是各種表單控件，如，輸入框，文本框，單選按鈕，多選按鈕，提交按鈕等。

語法代碼如下：

<form name="表單名稱" action="表單處理程序的服務地址" method="提交表單時所用的HTTP方法">
  ...... 表單控件......
  </form>

1、action —— 處理程序

這里的 action 屬性值表單提交的地址，就是表單收集好數據后要傳遞給遠程服務的地址，其地址可以是絕對路徑也可以是相對路徑，或者其它形式，如發送電子郵件。

使用表單發送電子郵件：

<form action="mailto:xxx@126.com">
  ...... 表單控件......
  </form>

提交到后臺程序地址：

<form action="action_page.php">
  ...... 表單控件......
  </form>

2、name —— 表單名稱

表單名稱，這一屬性不是必需的，但是為了防止表單信息提交到后臺處理程序時發生混亂，一般要設置一個名稱，且在同一頁面中最好是唯一的，不要和其它表單重復命名。

<form name="loginForm">
  ...... 表單控件......
  </form>

3、method —— 傳送數據方法

method 屬性用來定義處理程序使用那種方法來獲取數據信息，常用的有 get 和 post （http 協議定義的方法）。

<form name="loginForm" action="get 或 post">
  ...... 表單控件......
  </form>

何時使用 GET？

GET 最適合少量數據或不是很重要數據的提交，瀏覽器會設定容量限制，默認如何沒有設置method 屬性，表單則會使用get 方法。

當您使用 GET 時，表單數據在頁面地址欄中是可見的，會在表單提交的地址后面跟一個問號“?” ，問號后面是數據，以名稱1=值1&名稱2=值2 形式發送到后臺程序。

地址欄會看到如下：

action_page.php?firstname=Mickey&lastname=Mouse

關于 GET 的注意事項：
以名稱/值對的形式將表單數據追加到 URL
永遠不要使用 GET 發送敏感數據！（提交的表單數據在 URL 中可見！）
URL 的長度受到限制（2048 個字符）
對于用戶希望將結果添加為書簽的表單提交很有用
GET 適用于非安全數據，例如 Google 中的查詢字符串

何時使用 POST？

使用post 表單數據和url（表單提交地址）是分開發送的，在頁面地址欄中被提交的數據是不可見的，這樣安全性更好，用戶端會通知服務端獲取數據，所以這種情況沒有數據長度的限制，缺點是速度會慢些。

關于 POST 的注意事項：
將表單數據附加在 HTTP 請求的正文中（不在 URL 中顯示提交的表單數據）
POST 沒有大小限制，可用于發送大量數據。
帶有 POST 的表單提交后無法添加書簽

4、enctype —— 編碼方式

enctype 屬性規定在發送到服務器之前應該如何對表單數據進行編碼。

<form enctype="value">

有以下幾種值：

值	含義
application/x-www-form-urlencoded	在發送前編碼所有字符（默認編碼方式）
multipart/form-data	不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。
text/plain	以純文本的方式，空格轉換為 "+" 加號，但不對特殊字符編碼。

5、target —— 目標顯示方式

target 屬性規定在何處打開 action URL。表單的目標窗口通常用來顯示表單返回的信息，例如是否成功提交了表單，是否出錯等。

<form target="value">

屬性值有以下：

值	描述
_blank	在新窗口中打開。
_self	默認。在表單當前的窗口中打開。
_parent	在父窗口中打開。
_top	在頂級窗口中打開。
framename	在指定的框架窗口中打開。

看到這里是不是想的了之前學習超鏈接時候，a標簽也有同樣的屬性，這里差不多一個意思，只是用途不一樣。

這里的窗口有可能是框架 frame 或浮動窗口 iframe ，后面會講到框架和浮動窗口，就是在一個頁面中可以嵌套一個子窗口。

表單控件的使用

什么是表單控件，就是收集數據的各種形式控件，比如輸入框，密碼框，單選、多選按鈕，下拉菜單，文本域，文件域，提交按鈕等等。

如下代碼：

<form name="form1">
<div>用戶名：<input name="username" type="text" ></div>
<div>密碼：<input name="password" type="password" ></div>
<div>性別：
<input type="radio" name="sex" value="male" checked> 男
<br>
<input type="radio" name="sex" value="female"> 女
</div>
<div> 車輛：
<select name="cars">
<option value="volvo">baom</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
<div>留言：
<textarea name="message" rows="10" cols="30">
請輸入文本
</textarea>
</div>
</select>
  </form>

效果如下：

這里顯示了一個基本表單，包含了輸入框，密碼框，單選，下拉菜單，文本域等組件，下面會按其使用類型介紹表單控件。

所有表單控件都一個name屬性和vaule屬性，用于和其它控件區別，后臺程序將會以此名稱獲取其表單控件對應的vaule值。

下篇會介紹各種表單控件的使用，感謝關注。

上篇：前端入門——html 表格的使用

下篇：前端入門——html 表單控件使用

何在Spring boot中配置和發送郵件呢，今天我們就以QQ郵件為例，給大家說一下在spring Boot中發送，包括簡單郵件，html格式郵件，包含附件的郵件，和發送圖片內容的郵件

spring boot配置郵件

1.配置郵件

1.1配置maven依賴

1.2在application.properties中配置發送郵件的用戶名密碼等信息

1.3配置QQ郵箱的IMAP/SMTP信息，來配置spring.mail.password的信息

1.3.1登錄QQ郵箱，打開設置

1.3.2 點擊設置后，點擊賬號，找到以下模塊，點擊開啟，就可以生成授權碼

1.4編寫Service

package com.team.base.service;
import lombok.extern.java.Log;
import lombok.extern.log4j.Log4j;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.core.io.FileSystemResource;
import org.springframework.mail.SimpleMailMessage;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.stereotype.Service;
import javax.mail.MessagingException;
import javax.mail.internet.MimeMessage;
import java.io.File;
/**
* @com.team.base.service
* @fenghaiju
* @2018/3/19-16:46
* @springBootBase
**/
@Service
@Slf4j
public class MailService {
@Autowired
private JavaMailSender sender;
@Value("${spring.mail.username}")
private String from;
/**
* 發送純文本的簡單郵件
* @param to
* @param subject
* @param content
*/
public void sendSimpleMail(String to, String subject, String content){
SimpleMailMessage message = new SimpleMailMessage();
message.setFrom(from);
message.setTo(to);
message.setSubject(subject);
message.setText(content);
try {
sender.send(message);
log.info("簡單郵件已經發送。");
} catch (Exception e) {
log.error("發送簡單郵件時發生異常！",e);
}
}
/**
* 發送html格式的郵件
* @param to
* @param subject
* @param content
*/
public void sendHtmlMail(String to, String subject, String content){
MimeMessage message = sender.createMimeMessage();
try {
//true表示需要創建一個multipart message
MimeMessageHelper helper = new MimeMessageHelper(message, true);
helper.setFrom(from);
helper.setTo(to);
helper.setSubject(subject);
helper.setText(content, true);
sender.send(message);
log.info("html郵件已經發送。");
} catch (MessagingException e) {
log.error("發送html郵件時發生異常！",e);
}
}
/**
* 發送帶附件的郵件
* @param to
* @param subject
* @param content
* @param filePath
*/
public void sendAttachmentsMail(String to, String subject, String content, String filePath){
MimeMessage message = sender.createMimeMessage();
try {
//true表示需要創建一個multipart message
MimeMessageHelper helper = new MimeMessageHelper(message, true);
helper.setFrom(from);
helper.setTo(to);
helper.setSubject(subject);
helper.setText(content, true);
FileSystemResource file = new FileSystemResource(new File(filePath));
String fileName = filePath.substring(filePath.lastIndexOf(File.separator));
helper.addAttachment(fileName, file);
sender.send(message);
log.info("帶附件的郵件已經發送。");
} catch (MessagingException e) {
log.error("發送帶附件的郵件時發生異常！",e);
}
}
/**
* 發送嵌入靜態資源（一般是圖片）的郵件
* @param to
* @param subject
* @param content 郵件內容，需要包括一個靜態資源的id，比如：<img src=\"cid:rscId01\" >
* @param rscPath 靜態資源路徑和文件名
* @param rscId 靜態資源id
*/
public void sendInlineResourceMail(String to, String subject, String content, String rscPath, String rscId){
MimeMessage message = sender.createMimeMessage();
try {
//true表示需要創建一個multipart message
MimeMessageHelper helper = new MimeMessageHelper(message, true);
helper.setFrom(from);
helper.setTo(to);
helper.setSubject(subject);
helper.setText(content, true);
FileSystemResource res = new FileSystemResource(new File(rscPath));
helper.addInline(rscId, res);
sender.send(message);
log.info("嵌入靜態資源的郵件已經發送。");
} catch (MessagingException e) {
log.error("發送嵌入靜態資源的郵件時發生異常！",e);
}
}
}

1.5編寫Controller

package com.team.base.controller;
import com.team.base.service.MailService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
 * @com.team.base.controller
 * @fenghaiju
 * @2018/3/19-16:51
 * @springBootBase
 **/
@RestController
@RequestMapping("/mail")
public class MailController {
 @Autowired
 private MailService mailService;
 /**
 * 簡單發送
 * @return
 */
 @RequestMapping("/sendSimpleMail")
 public ResponseEntity<?> sendSimpleMail(){
 mailService.sendSimpleMail("fenghaiju@sohu.com", "簡單郵件", "簡單的郵件測試");
 return ResponseEntity.ok(true);
 }
 /**
 * 發送html內容
 * @return
 */
 @RequestMapping("/sendHtmlMail")
 public ResponseEntity<?> sendHtmlMail(){
 mailService.sendHtmlMail("fenghaiju@sohu.com", "html郵件", "<html><body><h3>你好， 這是一封模板郵件!</h3></body></html>");
 return ResponseEntity.ok(true);
 }
 /**
 * 發送附件
 * @return
 */
 @RequestMapping("/sendAttachmentsMail")
 public ResponseEntity<?> sendAttachmentsMail(){
 mailService.sendAttachmentsMail("fenghaiju@sohu.com", "附件郵件", "測試郵件內容","D:\\article\\結尾.txt");
 return ResponseEntity.ok(true);
 }
 /**
 * 發送圖片
 * @return
 */
 @RequestMapping("/sendInlineResourceMail")
 public ResponseEntity<?> sendInlineResourceMail(){
 mailService.sendInlineResourceMail("fenghaiju@sohu.com", "發送圖片", "<img src=\"cid:rscId01\" >","D:\\article\\架構師.png","rscId01");
 return ResponseEntity.ok(true);
 }
}

1.6測試郵件

1.6.1測試簡單郵件

1.6.2 測試Html格式郵件

1.6.3 測試附件郵件

1.6.4 測試圖片郵件

2.總結，大家在配置郵件的時候，注意配置文件的空格，否則會出現異常情況

TML的pre標簽

定義和用法

<pre> 標簽定義預先格式化的文本。

<pre> 元素中的文本以等寬字體顯示，文本保留空格和換行符。文本將完全按照 HTML 源代碼中所寫的方式顯示。

使用（保留原有格式），和div區別

執行結果如下：

在layui中使用，未使用pre,結果如下：在一行顯示，不太好看和理解

layer.alert(JSON.stringify(data,null,4));

使用pre標簽后,結果如下：json格式化展示出來了,易于理解和好看，方便分析。

layer.alert("<pre>"+JSON.stringify(data,null,4)+"</pre>");

2024-2-26

在線咨詢

上一篇：如何在網頁設計中用好圓形要素
下一篇：link與@import的區別和分別對應的例子

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商