form屬性、input屬性、base、input type (HTML5 二)

※form屬性、input屬性

HTML5的form的屬性目前新增兩個autocomplete、novalidate，這兩個input屬性也可使用，且會覆蓋form的屬性

※form

<form id=twoForm action=xxx.action></form>
<form id=oneForm action=ooo.action></form>
    
<input name=a value=aaa form=oneForm />
<input name=b value=bbb form=oneForm />
<input type=submit value=登入 form=oneForm />
<br />
<input name=c value=ccc form=twoForm />
<input name=d value=ddd form=twoForm />
<input type=submit value=登入 form=twoForm />

※之前要提交的內容都要寫在form裡面，現在可以不用
要提交的內容有一個屬性form，對到form的id名稱即可，用name不行

※form不要寫成<form action=xxx.action />

※formaction

<form id=xxx action=xxx.action></form>
    
<input type=submit value=增 form=xxx formaction=add.action />
<input type=submit value=刪 form=xxx formaction=del.action />
<input type=submit value=改 form=xxx formaction=upd.action />
<input type=submit value=查 form=xxx formaction=que.action />

※之前一個form要提交，想做多件事，都要取個name屬性名稱，然後在後端判斷這個字再做不同的事

※利用formaction屬性可以提交到不同的地方，當然同一個地方又有不同的事，還是要判斷

※formaction屬性會覆蓋屬性form連到的form id，所以這個例子的form id=xxx是沒有作用的

※input、button才有此屬性

※formmethod

input、button 才有此屬性，可以指定post、get方法，會覆蓋form的method屬性

※placeholder

input 和 textarea 才有此屬性，功能是給預設值

※autofocus

頁面一載入，就會將游標停在指定的地方，但如果裡面有值，假設是abc，那游標會停在a的左邊

如果有多個autofocus，只會抓取第一個

※autocomplete

輸入過後，要不要顯示之前打過的功能
屬性值是on和off，只有form和input才有此屬性

如果是form的autocomplete給on，那就代表屬於此form的資料通通都有此功能

※list

<input list=ooo />
    
<datalist id="ooo">
    <option value="param1">
    <option value="param2">
    <option value="param3">
</datalist>

※只有input有此屬性

※和autocomplete一樣的地方是，以此例而言，可以打pa後再選
和autocomplete不一樣的地方是，只會出現datalist裡的內容

※如果和autocomplete連用，除了datalist一定會有外，設定on還會加上曾經打過的值

※required、novalidate、formnovalidate

<form id=xxx action=xxx.action novalidate></form>
    
<input name=a required form=xxx />
<input type=submit form=xxx />

※只要加上required就表示欄必輸，按提交鈕時會驗證
但如果在form加上novalidate或者在input type=submit加上formnovalidate就不會驗證
驗證時有基本的訊息，但並不是很清楚是哪個欄位，可設定title屬性，這樣驗證時也會包括title裡的字串

※formenctype

form有個屬性enctype，之前就有了，有以下三個值
application/x-www-form-urlencoded：預設值，會對文字編碼
multipart/form-data：不會對文字編碼，上傳時必用
text/plain：空格轉成「+」，不會編碼

現在因為form的內容可以不在裡面寫，也就是可以有多個input type=submit
所以多了個formenctype

※formtarget

form有個屬性target，之前就有了，有以下四個值
_blank：在新視窗打開
_self：預設值，在目前框架打開
_parent：在父框架打開
_top：在整個窗口打開

現在因為form的內容可以不在裡面寫，也就是可以有多個input type=submit
所以多了個formtarget

※step

input type=number時使用，假設step=5，那就只能是5的倍數
要注意number不能打小數點，但負的可以

※min、max

<form id=xxx action=xxx.action></form>
    
<input type=date name=a max=1855-07-31 form=xxx required /><br />
<input type=date name=b min=2010-01-10 form=xxx required /><br />
<input type=number name=c min=1 max=5 form=xxx required /><br />
<input type=submit form=xxx />

※只能使用在input type=number和date

※base

<base href="http://localhost:8080/xox/" target="_blank">
    
<img src=ooo.jpg >
<a href=http://www.google.com>Google</a>
<a href=xxx>xxx</a>

※功能是可以在網址加上前綴

※就只有兩個屬性，target和上面介紹的一樣

※因為base為http://localhost…，所以ooo.jpg和xxx的前面自動會加上前綴

※Google的超連結因為網址打齊了，所以不會在前面加前綴

※input type

HTML5的type，新增了14個，color、date、datetime、datetime-local、email 、image、month 、number 、range 、search、tel、time 、url、week
並不是每個它都有範例的，有些我也沒悟出來，且我只用Chrome試而已

<form id=xxx action=xxx.action></form>
date：年月日<input type="date" form=xxx name=date /><br />
time：時分秒<input type="time" form=xxx name=time /><br />
datetime：沒試出來<input type="datetime" form=xxx name=datetime /><br />
datetime-local：年月日時分秒<input type="datetime-local" form=xxx name=datetime-local /><br />
month：年月<input type="month" form=xxx name=month /><br />
week：年星期<input type="week" form=xxx name=week /><br />
<br />
number：只能打出[正|負]整數<input type="number" form=xxx name=number /><br />
email：x@x<input type="email" form=xxx name=email /><br />
tel：須配合pattern<input type="tel" form=xxx pattern=\d{4}-\d{3}-\d{3} name=tel /><br />
url：http://x<input type="url" form=xxx name=url /><br />
<br />
color：選顏色，提交後是「%23+6個16進制」，但預設值的「%23」要打「#」<input type="color" form=xxx name=color value=#800080 /><br />
image：有submit的功能，提交後是name.x和name.y，自己寫的submit並不會包括這一個，所以它有自己的submit<input type="image" form=xxx name=image /><br />
range：拖曳範圍<input type="range" form=xxx min=-500 max=1000 name=range /><br />
search：沒試出來<input type="search" form=xxx name=search /><br />
<input type=submit form=xxx />

※畫面如下

※送出後的網址列
date=2017-01-02
time=22%3A04  -->22:04
datetime=xxx
datetime-local=2017-01-04T00%3A00  2017/01/04 00:00
month=2017-01
week=2017-W01  -->2017年，第01週
number=2
email=xxx.ooo%40gmail.com  -->xxx.ooo@gmail.com
tel=0800-222-333
url=http%3A%2F%2Fwww.google.com  -->http://www.google.com
color=%23800080
range=1000
search=sdf

※可得知
:=%3A
日期時間之間用T
@=%40
/=%2F
#=%23

※在javascript可以使用encodeURIComponent(':@/#');轉成%xxx
使用decodeURIComponent('%3A%40%2F%23');轉成符號

※但通常都是傳到後端的，所以js只能測試用，以下是java的轉換

try {
    String encode = URLEncoder.encode(":@/#", "UTF-8");
    System.out.println(encode); // %3A%40%2F%23
    
    String decode = URLDecoder.decode(encode, "UTF-8");
    System.out.println(decode); // :@/#
} catch (UnsupportedEncodingException e) {
    e.printStackTrace();
}

※java.net包下的工具

※range看不到數字目前是多少，可以搭配其他標籤顯示出來，例如HTML5還有一個output標籤，不能修改內容的，也沒有框框，如下配合使用

<input type="range" form=xxx min=-500 max=1000 name=range value=300 onchange=out.value=value />
<output id=out>300</output>

※預設值兩個都給300，然後拖曳後放開滑鼠就會改變，onchange裡面可以寫js，以前就有了，所以如果無效可以用
document.getElementById(out).value = this.value

※type=file在以前就有了，但屬性有變多

<input type=file accept=image/* multiple />

※ 可以利用accept上傳指定的文件；multiple可上傳多個