input type HTML5 VS browser


example link
3 Browser หลักของผม ออกมาไม่เหมือนกันซักอัน
1. RockMelt(Chrome Modified), 2. Firefox, 3. Safari
Chrome กับ Safari จะคล้ายกันหน่อยส่วนที่เห็นจะต่างก็คือ placeholder หรือ text ที่เป็นเงาๆ ใน inputbox ซึ่งอาจจะมาจาก webkit คนละ Version กัน

edit
มาต่อกันแล้วกับ Browser อีกตัวที่ทำมาจนหน้าตกใจเลยทีเดียว
มี toolbox สำหรับ input แต่ละ type มาให้เลยทีเดียว,แต่ที่น่าเสียดายคือบน Mac พวกปุ่มต่างๆ และข้อความจะดูไม่ค่อยพอดีเท่าไหร่
แต่ก็ถือว่าดีกว่า Browser ข้างบน เพราะสมมุติว่าถ้าเกิดเราเจอ input type ‘color’ นี่รับรองได้กรอกกันไม่ถูกเลยทีเดียวนอกจากจะเขียน JavaScript มาครอบไว้อีกที แต่ Opera จัดมาให้ชุดนึงก่อนโดยไม่ต้องเขียน javaScript ซักบรรทัด

และสำหรับการ Validate อัตโนมัติของ HTML5 มีเพียง
Firefox, Opera และ Chrome ที่ทำไว้ให้ , ส่วน Safari เด้งอยู่หน้าเดิม
เรื่องความสวยงามขอยกให้ Opera ครับ, ส่วน Firefox นี่ทำกรอบแดงให้ทุกฟิลเลยดูง่ายดี
Chrome ไม่สวยเลยให้ตายสิ 😦

อันนี้ source code ตัวอย่างครับเอาไปลองทดสอบกันเองได้
ลองกันดูได้ 😉

<!DOCTYPE HTML>

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Form</title>
	<meta name="author" content="Moss Mahidol">
	<!-- Date: 2011-06-28 -->
	
</head>
<body>
	<div id="inputform" >
		<form action="" method="post">
			<label for="textauto" >autofocus</label>
			<input type="text" placeholder="text"  name="textauto" id="textauto" autofocus="autofocus" required="required" />
			<br />
			<label for="text1" >text</label>
			<input type="text" placeholder="text"  name="text1" id="text1" required="required" />
			<br />
			<label for="date1">date</label>
			<input type="date" placeholder="date" name="date1" id="date1" required="required"  /><br />
			<label for="time1">time</label>
			<input type="time" placeholder="time" name="time1" id="time1" required="required"  /><br />
			<label for="email1">email</label>
			<input type="email" placeholder="email" name="email1" id="email1" required="required"  /><br />
			<label for="search1">search</label>
			<input type="search" placeholder="search" name="search1" id="search1" required="required"  /><br />
			<label for="number1">number</label>
			<input type="number" placeholder="number" name="number1" id="number1" required="required"  /><br />
			<label for="numberStep">number-step</label>
			<input type="number" placeholder="number with step" min="1" max="10" step="2" name="numberStep" id="numberStep" required="required"  /><br />
			<label for="datetime-local1">datetime-local</label>
			<input type="datetime-local" size="30" placeholder="datetime in local"  name="datetime-local1" id="datetime-local1" required="required"  /><br />
			<label for="datetime1">datetime</label>
			<input type="datetime" placeholder="datetime" size="30" name="datetime1" id="datetime1" required="required"  /><br />

			<label for="color1">color</label>
			<input type="color" min="1" max="10" step="2" placeholder="color" name="color1" id="color1" required="required"  /><br />

			<label for="url1">url</label>
			<input type="url" min="1" max="10" step="2" placeholder="url" name="url1" id="url1" required="required"  /><br />

			<br />
			<input type="submit" value="Submit" />
		</form>
	</div>
</body>
</html>

Advertisements

3 thoughts on “input type HTML5 VS browser

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s