表單Form元素實作程式碼以註冊為例的範例-html教學-PHP中文網

首頁

web前端

html教學

表單Form元素實作程式碼以註冊為例的範例

高洛峰

Mar 03, 2017 pm 04:09 PM

這篇文章主要介紹了表單Form元素的一些簡單實作程式碼以註冊為例，需要的朋友可以參考下表單Form元素實作程式碼以註冊為例的範例
程式碼實作方式：

##程式碼如下:

<!DOCTYPE html> 
<head> 
<title> New Document </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 
<meta charset="utf-8"> 
<style type="text/css"> 
p{ width:35%;margin-left:32%;} 
</style> 
</head> 
<body > 
<p> 
<form class="f1" action="http://www.baidu.com" method="get" > 
<fieldset > 
<legend>表单的注册</legend> 
<table width=100% > 
<tbody> 
<tr ><td class=“left” width=40% align="right"><label for="t1">姓 名：</label></td> 
<td class="right"><input type="text" id="t1" name="Name"></td> 
</tr> 
<tr><td class=“left” width=40% align="right"><label for="Password1">密 码：</label></td> 
<td class="right"><input id="Password1" type="password" name="Password" /></td> 
</tr> 
<tr><td class=“left” width=40% align="right"><label for="e1">邮 箱：</label></td> 
<td class="right"><input type="email" id="e1" name="youxiang" ></td> 
</tr> 
<tr><td class=“left” width=40% align="right"><label for="1">性 别：</label></td> 
<td class="right"><input type="radio" id="1" name="ssex" value="nan" />男<!-- name设置成一样的就行了--> 
<input type="radio" id="2" name="ssex" value="nv" />女 
</td> 
</tr> 
<tr><td class=“left” width=40% align="right">地 区：</td> 
<td><select id="selc" name="place"> 
<option value="quanzhou">泉州</option> 
<option value="xiamen">厦门</option> 
<option value="zhangzhou" >漳州</option> 
</select> 
</td> 
</tr> 
<tr><td class=“left” width=40% align="right"><label for="txtarea">简 介：</label></td> 
<td><textarea id="txtarea"></textarea></td> 
</tr> 
<tr><td class=“left” width=40% align="right">兴 趣：</td> 
<td><input type="checkbox" id="cbox1" name="dushu" value="c1">读书 
<input type="checkbox" id="cbox2" name="yundong" value="c2">运动 
<input type="checkbox" id="cbox3"name="chihe" value="c3">吃喝 
</td> 
</tr> 
<tr><td class=“left” width=40% align="right">上 传：</td> 
<td> <input type="file" id="f1" name="shangchuan" value="File1" /></td> 
</tr> 
<tr><td class=“left” width=40% align="right" rowspan=2> 
<input id="Submit1" type="submit" value="提 交" /> 
</td> 
<td> <input id="Reset1" type="reset" value="重 置" /> 
</td> 
</tr> 
</tbody> 
</table> 
</fieldset> 
</form> 
</p> 
</body> 
</html>

注意其中的程式碼label實作的功能是讓滑鼠在點擊文字的時候自動聚焦在文字方塊裡！

程式碼如下：

<label for="t1">姓 名：</label>

更多表單Form元素實作程式碼以註冊為例的範例相關文章請關注PHP中文網！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract