介紹HTML FORM 中的各種INPUT屬性值，所對應可用的屬性的操作方式

Posted on 2015-02-03 Edited on 2023-11-24 In HTML Views: Disqus:

一、HTML

<form>Tag裡面還包含著<input>Tag，其<input> type可為<input type="text">

或password、submit、radio、checkbox、buttun、hidden、...等等。

部分未提到的type property演示如下

1、type="file"

<!DOCTYPE html>
<html>
<body>
    <form action="" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit">
    </form>
</body>
</html>

後端為

[HttpPost]
public ActionResult Index(HttpPostedFileBase file)
{
    if (file.ContentLength > 0)
    {
        var fileName = Path.GetFileName(file.FileName);
       
        var path = System.IO.Path.Combine(Server.MapPath("~/"), fileName);
        file.SaveAs(path);
    }

    return Content("儲存成功");
}

(1)、如前端不使用form元素而使用BeginForm() Helper來產生其方法請參考

HttpPostedFileBase的「三、上傳至資料庫」

(2)、前端使用Ajax.BeginForm()時

使用Ajax.BeginForm()配合type="file"時，不能使用<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>，

否則於後端將無法匹配到來至前端所上傳的檔案，

注意form的屬性都必須要加上enctype = "multipart/form-data"屬性;

不能使用jquery.unobtrusive-ajax.js套件那不是很奇怪嗎？

不知是不是Helper的bug？所以將先改由jQuery的Ajax技術來做。

(3)、由jQuery的Ajax技術來做

Model與Controller的準備請參考HttpPostedFileBase的「三、上傳至資料庫」，

而前端改由ajax技術，如下

<form id="formUpLoad" enctype="multipart/form-data">
    <input type="file" name="file" value="" />
</form>

<button id="btnUpLoad">上傳</button>
<div id="download">
</div>

@section scripts{
    <script>
        $("#btnUpLoad").on("click", function myfunction() {
            $.ajax({
                url: "@Url.Action("UpLoadToDB")",
                method: "post",
                data: new FormData($('#formUpLoad')[0]),
                //data: $("#formUpLoad").serialize(),
                dataType: "json",
                cache: false,
                async: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    $("#download").append('<a href="@Url.Action("DownLoadFromDB")' + "/" + data + '"' + '>下載</a>');
                }
            });
        });
    </script>
}

特別要注意的事：

(a)、使用ajax技術來上傳檔案時，會跟new FormData()配合。

(b)、$('#formUpLoad')是個object型態的object，而$('#formUpLoad')[0]為取HTMLFormElement型態的object

(c)、由於是上傳檔案，processData要設為false，表示不需要對其數據做處理，

而一般的text文字傳遞則processData要設為true。

(d)、如果只是一般的text文字傳遞，data屬性你會使用「data: $("#formUpLoad").serialize()」。

(e)、如果檔案可以多選的情況要如何新增一個FormData？

也是一樣的，用$('#formUpLoad')[0]來取HTMLFormElement型態的object即可。

(4)、accept

當type="file"時，還可以設定檔案上傳所接受的種類

<!DOCTYPE html>
<html>
<body>
    <form action="" method="post" enctype="multipart/form-data">
        <input type="file" name="file" accept="image/*">
        <input type="submit">
    </form>
</body>
</html>

如上例，表示只接受圖檔上傳而已，還可指定其他參數值，請參考下表

Value	Description
file_extension	A file extension starting with the STOP character, e.g: .gif, .jpg, .png, .doc
audio/*	All sound files are accepted
video/*	All video files are accepted
image/*	All image files are accepted
media_type	A valid media type, with no parameters. Look at IANA Media Types for a complete list of standard media types

2、type="reset"

<!DOCTYPE html>
<html>
<body>
    <form action="">
        Email: <input type="text" name="email"><br>
        Pin: <input type="text" name="pin"><br>
        <input type="reset" value="Reset">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

此功能會清除已輸入文字的欄位

3、type="image"

<!DOCTYPE html>
<html>
<body>
    <form action="" method="post">
        First name: <input type="text" name="fname"><br>
        Last name: <input type="text" name="lname"><br>
        <input type="image" src="http://www.w3schools.com/tags/img_submit.gif" alt="Submit" width="48"
         height="48">
    </form>
</body>
</html>

後端為

[HttpPost]
public ActionResult Index(string fname, string lname, string x, string y)
{
    return Content(fname + " " + lname + " " + x + " " + y);
}

此功能為帶有圖片的submit按鈕，除了可替代submit功能之外，

還可以回傳滑鼠在圖片所點選的相對位置，

例如點選圖片左上角與右下角所出現的數值就會不一樣。

而黃色框alt屬性的功用為，當圖案無法顯示時，

則會保留區域，顯示alt屬性值來替代該圖案。

二、HTML5

另外html5也新增了一些type如range、

部分未提到的type property演示如下

1、color

Select your favorite color:

<!DOCTYPE html>
<html>
<body>
    <form action="" method="post">
        Select your favorite color:
        <input type="color" name="favcolor" value="#ff0000">
        <input type="submit">
    </form>
</body>
</html>

如果選擇紅色其後端可接收到的字串為#ff0000

2、date、month、week、time、datetime-local

<!DOCTYPE html>
<html>
<body>
    <form action="" method="post">
        Birthday (date and time):
        <input type="datetime-local" name="bdaytime">
        <input type="submit" value="Send">
    </form>
</body>
</html>

此以datatime-local為例，此功能類似一個日期選擇器供使用者點選日期，

傳到後端可用string來接他，例如後端所接到的字串為

2015-02-03T01:00或2015-02-03T13:00

注意：this types not support IE and firefox

3、email

<!DOCTYPE html>
<html>
<body>
    <form action="" method="post">
        E-mail:
        <input type="email" name="email">
        <input type="submit">
    </form>
</body>
</html>

如果輸入aaa@aaa.com.tw則後端接收到的字串為aaa@aaa.com.tw，

並且在post前會自動驗證是否為email格式，

如果不想做驗證則可在form tag間加入novalidate property即可

如：<form action="" method="post" novalidate>

4、url

<!DOCTYPE html>
<html>
<body>
    <form action="">
        Add your homepage:
        <input type="url" name="homepage">
        <input type="submit">
    </form>
</body>
</html>

如果輸入http:www.yahoo.com.tw則後端接收到的字串為http:www.yahoo.com.tw，

並且在post前會自動驗證是否為url格式，

如果不想做驗證則可在form tag間加入novalidate property即可

如：<form action="" method="post" novalidate>

參考資料：

HTML <input> type Attribute

ASP.NET MVC - 檔案上傳的基本操作