HTML 表單操作
In HTML, we have using a form tag to navigate the web pages. The tag which consists of action, methods and values attribute in the HTML. The Method attributes which specified how to send the data from one page to another page after validation. Generally, we have sent the form data through URL Methods like get and post. Form Tag in HTML is used for web pages that are the user to enter data it will move to server validation, it can resemble the pages because the server validates the user request. Even though all the html tags like checkboxes, radio buttons, text fields, etc..those fields will use the form to validate purpose in the backend.
Form Action in HTML
Whenever we enter the data in the view page(user) using a browser, it will move to the backend. The HTML action needs some attributes to specify the request if; suppose we have a JSP page with servlet; the user enters the data in frontend those datas which handles using the form known as form data. The value of an HTML action attribute is nothing but a URL; there is no default value of HTML action attributes.
Syntax:
<html> <body> <form action="/controller pages(jsp,servlet,html,php)" method="get/post"> ………..Some html tags and user defined values….. </form> </body> </html>
The above syntax is the basics for creating the forms in html. It is the flow of navigating the web pages.
Examples of HTML Form Action
Following are the example of html form action as given below:
Example #1
Code:
<html>
<body>
<form action="C:\\Users\\SUN-4\\Documents\\New folder\\fisrst.jsp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<html>
<body>
<% String fname=request.getparameter("fname");%>
<% String lname=request.getparameter("lname");%>
<% out.println("Your input was received as:" +"FirstName=fname & LastName=lname");
%>
</body>
</html>
Output:
Code Explanation: In the above example, we will use the action page as JSP; after the user entered the data, it will validate from the jsp page and display the output on the browser screen.
Note: Whenever we use jsp, we need application servers like tomcat, jetty, WebLogic, etc.Example #2
Code:
<html>
<body>
<form id="form1" action="C:\\Users\\SUN-4\\Documents\\New folder\\fisrst.jsp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("form1").action = "https://cdn.educba.com/fisrst.jsp";
document.getElementById("demo").innerHTML = "The value of the action attribute was changed to /fisrst.jsp.";
}
</script>
</body>
</html>
Output:
Code Explanation: In the above example, we will use the javascript function for navigating the web pages or not. If we use the javascript function in the HTML, it will more use of validation, alert the messages, and whatever the user-customized information is to be validated by the scripts. We use the DOM object that is the Document Object Model, a model for accessing the documents and is a platform and language-neutral interfaces that allow programs to dynamically access and update the content structure and styles of the user-defined datas.
Example #3
Code:
<html>
<style>
body {
color: yellow;
height: 100vh;
background:Green;
text-align: center;
}
input {
width: 315px;
padding: 8px;
background: Green;
border-radius: 20px;
}
::placeholder {
color: Green;
}
.btn {
background:Green;
height: 200px;
width: 300px;
}
</style>
<body>
<form id="form1" action="C:\\Users\\SUN-4\\Documents\\New folder\\fisrst.jsp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("form1").action = "https://cdn.educba.com/fisrst.jsp";
document.getElementById("demo").innerHTML = "The value of the action attribute was changed to /fisrst.jsp.";
}
</script>
</body>
</html>
Output:
Code Explanation: The above example is the basic purpose; whenever we develop the web page, it will need to satisfy the user requirements and be more attractive on the user side. Only the user will be more interested in using our Applications. So the above example, we use CSS Style in the form page is one of the more attractive and interacts with the user side.
Send Emails Using HTML Forms
It is one of the best features for web developers by using the browsers to allow them to route the form directly to a user email address after submission and is one of the ideas, but the reason is that if the browsers allowed emailing directly from the web form page that also will reveal the visitor’s email address directly, it also affects the users data. The hacker can collect the user information easily from the email address of the user web page and then spam it.
In order to protect the web users, no client-side language can send an email directly without the user interventions. We can set the form action field like as “mailto”, using this case, the browser invokes the mail client to send the form submission to the particular email address, which is to be user-specified.
Example:
<form action="mailto:[email protected]">
Generally, HTML form has two parts: the user point of view, that is, the front end form that you see in the browser screen, and the second is a back-end script that runs on the web servers. Your web browsers display the form using some HTML codes; after submitting the form, the browser sends the information whatever you submitted data in the form to the backend.
Some links we have defined in the above examples.
<form action="https://cdn.educba.com/First.jsp">
The browser will pick the URL mentioned in the form of action attributes and send the data to that URL, using web servers passes the form submission data to the script in the action URL(example.jsp). Now the backend scripts also send emails after submitted for the form data to the database.
Send Mail Using jsp
Here we discuss how to send mail using jsp:
<%@ page import = "java.io.*,java.util.*,javax.mail.*"%>
<%@ page import = "javax.mail.internet.*,javax.activation.*"%>
<%@ page import = "javax.servlet.http.*,javax.servlet.*" %>
<%
String result;
// Recipient's email ID needs to be mentioned.
String to = "[email protected]";
// Sender's email ID needs to be mentioned
String from = "[email protected]";
// Assuming you are sending email from localhost
String host = "localhost";
// Get system properties object
Properties properties = System.getProperties();
// Setup mail server
properties.setProperty("mail.smtp.host", host);
// Get the default Session object.
Session mailSession = Session.getDefaultInstance(properties);
try {
// Create a default MimeMessage object.
MimeMessage message = new MimeMessage(mailSession);
// Set From: header field of the header.
message.setFrom(new InternetAddress(from));
// Set To: header field of the header.
message.addRecipient(Message.RecipientType.TO,
new InternetAddress(to));
// Set Subject: header field
message.setSubject("Subject!");
// Now set the actual message
message.setText("Message");
// Send message
Transport.send(message);
result = "Sent message successfully....";
} catch (MessagingException mex) {
mex.printStackTrace();
result = "Error: unable to send message....";
}
%>
<html>
<body>
<center>
<h1>Send Email using JSP</h1>
</center>
<p align = "center">
<%
out.println("Result: " + result + "\n");
%>
</p>
</body>
</html>
Output:
程式碼說明：在上面的範例程式中，我們已經注意到了使用一些應用程式伺服器來運行上述程式碼的資訊；它將使用 jsp 程式發送電子郵件。
結論
在最新的技術中，我們有很多功能可以減少工作量，並有責任每天更新知識。 HTML 和 HTML5 的相同之處在於，最新版本的 HTML 具有相同的功能，但在瀏覽器相容性方面採取了更多步驟。每當我們使用 HTML 時，我們都必須檢查瀏覽器是否支援 HTML 5。 HTML 中有很多功能，稍後再討論。
以上是HTML 表單操作的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用標籤突出顯示文本？
Aug 04, 2025 pm 04:29 PM
使用標籤可語義化地高亮文本，常用於標識搜索結果或重要內容；2.可通過CSS自定義樣式，如背景色、文字色和邊框；3.應在具有實際意義的上下文中使用，而非僅作視覺裝飾，以提升可訪問性和SEO效果。
如何使用HTML創建一個在新標籤中打開的鏈接
Aug 05, 2025 am 04:29 AM
要安全地在新標籤頁中打開鏈接，需使用target="_blank"並始終配合rel="noopener"，可選rel="noreferrer"以增強隱私保護，具體步驟為：1.使用href設置目標URL；2.添加target="_blank"使鏈接在新標籤頁打開；3.加上rel="noopener"防止新頁面操控原頁面並提升性能；4.可選rel="noreferrer"以阻止發送
什麼是HTML5數據屬性？
Aug 06, 2025 pm 05:39 PM
HTML5dataattributesarecustom,validHTMLattributesusedtostoreextrainformationinelementsforJavaScriptorCSS.1.Theyaredefinedasdata-*attributes,likedata-user-id="123".2.Theyallowembeddingprivate,customdatadirectlyinmarkupwithoutaffectinglayoutor
如何使用HTML ABBR標籤進行縮寫
Aug 05, 2025 pm 12:54 PM
使用HTML的標籤能提升內容的可訪問性和清晰度；1.用縮寫標記縮寫或首字母縮略詞；2.為不常見的縮寫添加title屬性以提供完整解釋；3.在文檔首次出現時使用，避免重複標註；4.可通過CSS自定義樣式，默認瀏覽器通常顯示帶點下劃線；5.有助於屏幕閱讀器用戶理解術語，增強用戶體驗。
如何將HTML用於基本文本格式
Aug 05, 2025 pm 03:05 PM
Useforforboldandsemanticimportance，and foritalIcAndemphaseInsteadoforBetterAccosconibilityAndseo.2.StructureContentWithHeadingTagsto，andUseForsMallerTextLikedisClaiMers.3.SeceparateParateParateParateParateParateParateParateParateParateParagrapparagragragragraprapparagrapraplArgaPrArghabRabrabragrapparagraplAgraPlaplAplaPhAphSusingThesthestheself-ClosiceTag。
HTML5中支持的音頻格式是什麼？
Aug 05, 2025 pm 08:29 PM
HTML5音頻格式支持因瀏覽器而異，最常用格式包括：1.MP3（.mp3，audio/mpeg，所有主流瀏覽器均支持，兼容性最佳）；2.WAV（.wav，audio/wav，支持較好但文件大，適合短音頻）；3.OGG（.ogg/.oga，audio/ogg，Chrome、Firefox、Opera支持，Safari和IE不支持，開源免費）；4.AAC（.aac/.m4a，audio/aac，Safari、Chrome、Edge支持，Firefox支持有限，常用於蘋果設備）。為確保兼容性，應在標籤
您如何在HTML5中循環音頻或視頻文件？
Aug 06, 2025 am 12:13 AM
要使音頻或視頻文件在HTML5中循環播放，只需在audio或video標籤中添加loop屬性即可。 1.對於基本循環，直接在audio或video元素中添加loop屬性，例如或，播放結束後會自動從頭開始。 2.若需自動播放並循環，可結合autoplay、loop和muted屬性，尤其適用於背景視頻，如。 3.可通過JavaScript控制循環狀態，設置video.loop=true啟用或video.loop=false禁用。 4.若需精確循環特定時間段，需使用JavaScript監聽時間並手動設置cur
