純Html/CSS美國電話號碼輸入

只是要清楚我不是在詢問驗證，只是純粹的佈局。我試圖在中間顯示三個單獨的輸入字段。這是到目前爲止我所擁有的鏈接。 http://jsfiddle.net/kCNA4/
這裏是我的問題是否有更好的方法來做到這一點，我是否完成錯誤或是我寫的方式是正確的。非常感謝。純Html/CSS美國電話號碼輸入

來源

2011-03-22 Mr. Smee

看起來好像沒什麼問題。你可能想考慮在這兩個盒子之間使用不同的短劃線，特別是'–'。 – Pointy 2011-03-22 23:02:23

哦，你也許已經嘗試過了，但是很多UI用戶真的很喜歡左對齊的表單，標籤與你的一樣，但是（在這個例子中）的名字是「First Name」，而不是右邊的。就我個人而言，我很矛盾。 – Pointy 2011-03-22 23:04:43

@pointy我正在關閉一個PSD，但我想我也是在某處讀的。 – 2011-03-23 00:47:52

對我來說看起來不錯 - 同意評論，–應該用於連字符，只是我會添加一些改進。一，輸入類型編號（我知道你現在不擔心驗證）作爲HTML 5輸入類型定義。另外，爲字段使用唯一名稱，以便在發佈時可以識別輸出。

<input type="number" value="" maxlength="3" name="phoneNumberFirst" id="mainFormPhoneFirst">

來源

2011-03-22 23:09:11

感謝您的反饋。只有一個問題，你確定我應該爲電話號碼使用唯一的名稱，即使它是同一電話號碼的全部部分。 – 2011-03-23 00:46:23

當它被某些服務器腳本讀取時 - 它會將它們視爲所有單獨的輸入框，並且服務器腳本負責將它們組合到一個變量中。所以是的，他們需要不同的名字，或者如果服務器端語言支持它，可能會被命名爲數組。 – 2011-03-23 01:08:11

一個有關電話號碼條目方面的是，有一個更好的「類型」提供許多功能手機和移動網絡瀏覽器提供了獨特的，唯一的編號錄入方法。

<input type="tel" ... />

如果你只想數字輸入，這似乎是一個偉大的方式來「強制」，對於移動瀏覽器（有可能是一個解決辦法或所有移動瀏覽器不工作）。您仍然需要過濾和驗證輸入，但我認爲移動用戶的體驗會更好。

來源

2014-01-31 13:57:50 veeTrain

你應該試試這個簡單的輸入申請標籤是這樣的：

<input type="tel" name="tel1" title="3-digit" maxlength="3" minlength="3" size="3"/> - 
<input type="tel" name="tel2" title="3-digit" maxlength="3" minlength="3" size="3"/> - 
<input type="tel" name="tel3" title="4-digit" maxlength="4" minlength="4" size="4"/>

來源

2017-03-09 08:25:20

純Html/CSS美國電話號碼輸入

回答

相關問題