上傳表單html
㈠ html上傳表單屬性
表單的文件上傳元素默認樣式確實是：
只是這樣並不美觀，於是常見做法是創建一個文本框和一個按鈕來配合文件上傳元素：
核心就是將上傳元素的透明度設置為0，即完全透明，然後絕對定位到按鈕上上面，這樣用戶點擊按鈕時，實際是點擊到上傳元素。然後添加js，將上傳元素的value值賦給文本框的value值，實現在文本框中顯示文件元素的value屬性值。
該上傳元素的onchange事件監聽函數為：onchange="document.getElementById('textfield').value=this.value"
㈡ html 表單上傳圖片
使用表單中的文件域（<input type="file".../>）控制項可以上傳文件。
打開DreamWeaver，這里使用的版本是CS6，新建一個php文件。
保存到網站目錄下，命名為upload.php。
在代碼中插入一個表單
對話框中，操作留空，方法選擇「post」，編碼類型輸入「multipart/form-data」，名稱命名為「upload_form」，其中編碼類型必須為「multipart/form-data」。點擊確定，產生的代碼如下：
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form"></form>
</body>
接下來在form中插入一個標簽控制項、一個文件域控制項和一個上傳按鈕。
結果如下：
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form">
<label>選擇圖片文件</label>
<input name="imgfile" type="file" accept="image/gif, image/jpeg"/>
<input name="upload" type="submit" value="上傳" />
</form>
</body>
不同的瀏覽器，對於文件域控制項的顯示不同，IE9瀏覽器和FireFox中的預覽效果都要看一下
代碼中，重要的是名為imgfile的文件域控制項，type屬性為「file」，表示這是一個文件域控制項。
accept屬性表示點擊「瀏覽...」按鈕時，彈出的打開對話框中的文件類型。accept="image/gif, image/jpeg"表示我們只想在文件打開對話框中顯示後綴名為「gif」和「jpg」、「jpeg」的文件。對於此屬性，有些瀏覽器並不支持。比如在IE9中，此屬性不起任何作用。在chrome中，此屬性起作用。
如果想支持所有的圖像文件，accept值可以設置為「image/*」，在chrome中，文件類型顯示
好了，html代碼就寫完了，因為action=""，表示點擊上傳按鈕時，將表單提交給自身，因此，我們還要添加接收表單的處理代碼。
代碼如下：
<?php
if (isset($_FILES['imgfile'])
&& is_uploaded_file($_FILES['imgfile']['tmp_name']))
{
$imgFile = $_FILES['imgfile'];
$imgFileName = $imgFile['name'];
$imgType = $imgFile['type'];
$imgSize = $imgFile['size'];
$imgTmpFile = $imgFile['tmp_name'];
move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName);
$validType = false;
$upRes = $imgFile['error'];
if ($upRes == 0)
{
if ($imgType == 'image/jpeg'
|| $imgType == 'image/png'
|| $imgType == 'image/gif')
{
$validType = true;
}
if ($validType)
{
$strPrompt = sprintf("文件%s上傳成功<br>"
. "文件大小: %s位元組<br>"
. "<img src='upfile/%s'>"
, $imgFileName, $imgSize, $imgFileName
);
echo $strPrompt;
}
}
}
?>
代碼分析：
$_FILES是一個數組變數，用於保存上傳後的文件信息。
$_FILES['imgfile']表示文件域名稱為'imgfile'的控制項提交伺服器後，上傳的文件的信息。
一個上傳的文件，有以下屬性信息：
'name'： 上傳的文件在客戶端的名稱。
'type'： 文件的 MIME 類型，例如"image/jpeg"。
'size'： 已上傳文件的大小，單位為位元組。
'tmp_name'：上傳時，在伺服器端，會把上傳的文件保存到一個臨時文件夾中，可以通過此屬性得到臨時文件名。
'error'：文件在上傳過程中的錯誤代碼。如果上傳成功，此值為0，其它值的意義如下：
1：超過了php.ini中設置的上傳文件大小。
2：超過了MAX_FILE_SIZE選項指定的文件大小。
3：文件只有部分被上傳。
4：文件未被上傳。
5：上傳文件大小為0。
代碼中首先判斷$_FILES['imgfile']變數是否存在，如果存在，並且$_FILES['imgfile']['tmp_name']變數所指文件被上傳了，判斷error屬性，如果屬性為0，把上傳後的圖像從臨時文件夾移到upfile文件夾中，顯示上傳文件的信息，並顯示上傳後的圖像。
如果error值不為0，表示上傳失敗，顯示失敗信息。
完成的代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.mobiletrain.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.mobiletrain.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上傳圖片文件</title>
</head>
<?php
if (isset($_FILES['imgfile'])
&& is_uploaded_file($_FILES['imgfile']['tmp_name']))
{
$imgFile = $_FILES['imgfile'];
$upErr = $imgFile['error'];
if ($upErr == 0)
{
$imgType = $imgFile['type']; //文件類型。
/* 判斷文件類型，這個例子里僅支持jpg和gif類型的圖片文件。*/
if ($imgType == 'image/jpeg'
|| $imgType == 'image/gif')
{
$imgFileName = $imgFile['name'];
$imgSize = $imgFile['size'];
$imgTmpFile = $imgFile['tmp_name'];
/* 將文件從臨時文件夾移到上傳文件夾中。*/
move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName);
/*顯示上傳後的文件的信息。*/
$strPrompt = sprintf("文件%s上傳成功<br>"
. "文件大小: %s位元組<br>"
. "<img src='upfile/%s'>"
, $imgFileName, $imgSize, $imgFileName
);
echo $strPrompt;
}
else
{
echo "請選擇jpg或gif文件，不支持其它類型的文件。";
}
}
else
{
echo "文件上傳失敗。<br>";
switch ($upErr)
{
case 1:
echo "超過了php.ini中設置的上傳文件大小。";
break;
case 2:
echo "超過了MAX_FILE_SIZE選項指定的文件大小。";
break;
case 3:
echo "文件只有部分被上傳。";
break;
case 4:
echo "文件未被上傳。";
break;
case 5:
echo "上傳文件大小為0";
break;
}
}
}
else
{
/*顯示表單。*/
?>
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form">
<label>選擇圖片文件</label>
<input name="imgfile" type="file" accept="image/gif, image/jpeg"/>
<input name="upload" type="submit" value="上傳" />
</form>
</body>
<?php
}
?>
</html>
㈢ HTML中如何使用html表單提交的操作
表單標簽的主要作用是：在HTML頁面中創建一個表單，在用戶填寫完表單信息後，將數據提交給伺服器。需要填寫數據的標簽必須要放在表單標簽體裡面。 常用的屬性： action：請求路徑，在該屬性中確定表單數據提交的伺服器地址。 method：請求方式。常用的請求方式有：get，post。 get（默認）：1.get的請求的數據有限 2.提交的表單數據是追加在請求的路徑上，如：regist.action?username=jack&password=1111。追加是在請求地址的後面加上?連接。之後每一對數據使用&連接。 post：1.提交的數據不在請求路徑上追加，不顯示在地址欄上。 2.理論上，post請求的數據量是無限的。
㈣ html表單的幾種提交方式總結
最普通最常用最一般的方法就是用submit type看代碼：
代碼如下:
<form name=」form」 method=」post」 action=」#">
<input type=」submit」 name=」submit」 value=」提交">
</form>
另外，還有一種常用的方法是使用圖片： 代碼如下:
<form name=」form」 method=」post」 action=」# ">
<input type=」image」 name=」submit」 src=」btnSubmit.jpg」>
</form>
第三種是使用鏈接來提交表單，用到了javascript的DOM模型，代碼如下:
<form name=」form」 method=」post」 action=」#」>
<a href=」javascript:form.submit();」>提交</a>
</form>
這種方法實際上是調用了一個javascript函數，使用javacript函數來提交表單，方法就非常多非常靈活了，比如可以把它加入到任意一個標簽的onclick事件中： 代碼如下:
<form name=」form」 method=」post」 action=」#」>
<div onclick=」javascript:form.submit();」>
<span>提交</span>
</div>
</form>
比如一個表單里的提交按鈕所指向的處理頁面不同，這樣由於表單在定義的時候就已經確定下表單數據的處理頁面，所以單純地在表單里放多個提交按鈕是沒有辦法達到目的的。這就需要javascript。
首先定義一個函數：
代碼如下:
<script language=javascript>
function query(){
form.action=」query.php」;
form.submit();}
function update(){
form.action=」update.php」;
form.submit();}
</script>
通過javascript改變form的action屬性值，這樣就可以實現多提交按鈕而且功能不同了，頁面內代碼如下：
<form name=」form」 method=」post」 action=」#」>
<input type=」button」 name=」query」 onclick=」query();」 value=」查詢」>
<input type=」button」 name=」update」 onclick=」update();」 value=」更新」>
</form>
㈤ HTML 表單提交 的簡單代碼
1、打開Dreamweaver編輯器，准備好一個空白的html文件，寫入基本的html結構：
㈥ html表單的幾種提交方式總結
form保單提交的幾種方法：
1、方法一：利用form的onsubmit()函數
<script type="text/javascript">
function validateForm(){
if(document.reply.title.value == ""){ //通過form名來獲取form
alert("please input the title!");
document.reply.title.focus();
return false;
}
if(document.forms[0].cont.value == ""){ //通過forms數組獲取form
alert("please input the content!");
document.reply.cont.focus();
return false;
}
return true;
}
<form name="reply" method="post" onsubmit="return validateForm( );">
<input type="text" name="title" size="80" /><br />
<textarea name="cont" cols="80" rows="12"></textarea><br />
<input type="submit" value="提交" >
</form>
注意：
1.onsubmit屬性內容一定要有return關鍵字，否則函數會直接執行，不會返回
2.validateForm一定要返回一個boolean類型的返回值
3.提交按鈕要寫成submit類型的
方法二：利用input類型為submit組件的onclick()函數
1.將上面form標簽中的onsubmit="return validateForm()"屬性，去掉。
2.為「提交」按鈕添加onclick事件，如下：
<input type="submit" value="提交" onclick="return validateForm();">
方法三：利用button組件的onclick()函數，手動提交
<script type="text/javascript">
function modifyItem() {
if (trim(document.getElementById("itemName").value) == "") {
alert("物料名稱不能為空！");
document.getElementById("itemName").focus();
return;
}
with (document.getElementById("itemForm")) {
method = "post";
action = "item.do?command=modify&pageNo=${itemForm.pageNo}";
submit();
}
}
//返回
function goBack() {
window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";
}
</script>
<form name="itemForm" id="itemForm">
<input name="itemNo" type="text" id="itemNo" value="${ item.itemNo }" >
<input name="itemName" type="text" id="itemName" value="${ item.itemName }" >
<input name="btnModify" type="button" id="btnModify" value=「修改" onclick="modifyItem()">
</form>
注意：
.提交時，設置form的action和methods屬性，然後利用form.submit()函數提交。
㈦ HTML表單的POST上傳方式
是<form></form>之間的內容，例如：<form action="/search" name="search-form" method="post" id="search-form" class="search-form">，其中method就是上傳的方式。
㈧ html表單怎麼上傳圖片
html表單這樣上傳圖片：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.mobiletrain.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.mobiletrain.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上傳圖片</title>
</head>
㈨ html表單的幾種提交方式總結
form保單提交的幾種方法：
1、方法一：利用form的onsubmit()函數
<scripttype="text/javascript">
functionvalidateForm(){
if(document.reply.title.value==""){//通過form名來獲取form
alert("pleaseinputthetitle!");
document.reply.title.focus();
returnfalse;
}
if(document.forms[0].cont.value==""){//通過forms數組獲取form
alert("pleaseinputthecontent!");
document.reply.cont.focus();
returnfalse;
}
returntrue;
}
<formname="reply"method="post"onsubmit="returnvalidateForm();">
<inputtype="text"name="title"size="80"/><br/>
<textareaname="cont"cols="80"rows="12"></textarea><br/>
<inputtype="submit"value="提交">
</form>
注意：
1.onsubmit屬性內容一定要有return關鍵字，否則函數會直接執行，不會返回
2.validateForm一定要返回一個boolean類型的返回值
3.提交按鈕要寫成submit類型的
方法二：利用input類型為submit組件的onclick()函數
1.將上面form標簽中的onsubmit="return validateForm()"屬性，去掉。
2.為「提交」按鈕添加onclick事件，如下：
<input type="submit" value="提交" onclick="return validateForm();">
方法三：利用button組件的onclick()函數，手動提交
<scripttype="text/javascript">
functionmodifyItem(){
if(trim(document.getElementById("itemName").value)==""){
alert("物料名稱不能為空！");
document.getElementById("itemName").focus();
return;
}
with(document.getElementById("itemForm")){
method="post";
action="item.do?command=modify&pageNo=${itemForm.pageNo}";
submit();
}
}
//返回
functiongoBack(){
window.self.location="item.do?command=list&pageNo=${itemForm.pageNo}";
}
</script>
<formname="itemForm"id="itemForm">
<inputname="itemNo"type="text"id="itemNo"value="${item.itemNo}">
<inputname="itemName"type="text"id="itemName"value="${item.itemName}">
<inputname="btnModify"type="button"id="btnModify"value=「修改"onclick="modifyItem()">
</form>
注意：
1.提交時，設置form的action和methods屬性，然後利用form.submit()函數提交。
㈩ 怎樣用html寫表單的教程
我們在瀏覽一些網站時經常會用到一種網頁元素--表單。如下圖，像這樣允許用戶輸入並使用按鈕提交信息的功能，我們稱之為表單，那麼接下來介紹HTML表單相關的一些知識點。
1)表單:幫助伺服器收集客戶端信息的一種機制
<formaction="提交到的頁面"method="提交的方法">
表單控制項
form>
<inputtype="text"name=""id=""value=""size=""placeholder=""/>
<inputtype="password"name=""id=""size=""/>
<inputtype='radio'name=""value=""checked>標示符
性別:<inputtype='radio'name=""value=""checked>男
<inputtype='radio'name=""value=""checked>女
<inputtype='radio'name=""value=""checked>保密
<inputtype='checkbox'name=""id=""value=""checked>標示
<inputtype='checkbox'name='classes[]'checkedvalue='1'>語文
<inputtype='checkbox'name='classes[]'value='2'>數學
<inputtype='checkbox'name='classes[]'value='3'>歷史
<inputtype='checkbox'name='classes[]'value='4'>政治
<inputtype='checkbox'name='classes[]'value='5'>物理
<inputtype='checkbox'name='classes[]'value='6'>化學
<inputtype='checkbox'name='classes[]'checkedvalue='7'>美術
action:數據最後所提交的頁面 絕對路徑/相對路徑
method:數據提交伺服器時的提交方法 post get
2)表單控制項:表單用於用戶填寫信息的控制項
1、文本控制項: 用於用戶填寫較少信息，且可以顯示用戶填寫信息的控制項
(注冊時，用戶名填寫)
格式:
type:設置控制項樣式 text
name:用於表單收集信息的一種標示符，也就是控制項的名稱
2、密碼框:只是用戶輸入的內容看不到
3、單選按鈕組:由多個單選按鈕組成的按鈕組，只能選中其中一個，這種按鈕組
name:為了保證傳遞伺服器數據只有一個，所以name值必須相同
value：是用提交伺服器時，該標簽被提交的數據,value不能相同;
checked:默認按鈕組中的那個按鈕被選中
所有表單控制項name值不能相同!!!
4、復選按鈕組: 與單選按鈕組的區別可以選擇多個，為了能將用戶選擇的多項內容傳遞伺服器中，要將name名字後面加個[]
格式:
選課:
注意：一定要在name屬性後面添加[]
5)下拉列表框:
格式:
<selectname="">
<optionvalue=""selected>下拉列表項option>
<optionvalue="">下拉列表項option>
<optionvalue="">下拉列表項option>
<optionvalue="">下拉列表項option>
<optionvalue="">下拉列表項option>
select>
<textareaname=""id=""cols=""rows="">
內容
textarea>
<textareaname='descs'cols="50"rows="10">
我是個學生
textarea>
<inputtype="hidden"name=「」value=」」>
<inputtype="file"name=」」>
<inputtype='button'name=」」value=""/>
<inputtype='button'name='clicks'value="點我"/>
<inputtype='submit'name="add"value='注冊'/>
<inputtype='reset'name='cancel'value='重置'>
<inputtype='image'src='圖片地址'name=」」>
multiple:允許用戶選中多個下拉列表項
optgroup: 設置下拉分類標示
6) 文本域：可以輸入多行數據的表單控制項
rows:設置文本域可以輸入的行數
cols:設置的文本域輸入的列數(一行可以輸入多少個字元)(不是PX)
個人介紹:
7)隱藏域：
8)上傳控制項：
9)按鈕標簽:
普通按鈕:為js提供的控制項
value：按鈕中顯示的數據和提交到伺服器後該控制項提交的值
提交按鈕:點擊後可以提交表單
重置按鈕:點擊後可以將用戶輸入的數據清空
圖片提交按鈕:使用圖片作為提交按鈕
本文的分享就到這，希望我的回答能幫到你。