그냥 분명히 나는 유효성 검사에 대해 묻지 않고, 순수한 레이아웃을 요구합니다. 사이에 대시가있는 세 개의 별도 입력 필드를 표시하려고합니다. 여기 내가 지금까지 가지고있는 것에 대한 링크가 있습니다. http://jsfiddle.net/kCNA4/
여기에 내 질문이 있습니다.이 작업을 수행하는 더 좋은 방법이 있습니다. 완료를 잘못하고 있거나 올바르게 작성한 방법입니다. 정말 고마워.순수한 HTML/CSS 미국 전화 번호 입력
내게 꽤 좋아 보인다 - 의견에 동의하면 –을 하이픈에 사용해야하며 몇 가지 개선점 만 추가 할 것입니다. 하나는 HTML 5 입력 유형 정의로 입력 유형 번호입니다 (현재 유효성 검사에 대해 걱정하지 않는다는 것을 알고 있습니다). 또한 게시 할 때 출력을 식별 할 수 있도록 필드에 고유 한 이름을 사용하십시오. 전화 번호 입력에 대한 측면의
<input type="number" value="" maxlength="3" name="phoneNumberFirst" id="mainFormPhoneFirst">
의견을 보내 주셔서 감사합니다. 한 가지 질문은 동일한 전화 번호의 모든 부분에도 불구하고 전화 번호에 고유 한 이름을 사용해야한다는 것입니다. –
일부 서버 스크립트에서 읽을 때 - 모든 별도의 입력 상자로 취급하며 모든 입력 파일을 하나의 변수로 묶는 것은 서버 스크립트의 책임입니다. 그래서 네, 그들은 다른 이름을 필요로하거나 서버 측 언어가 지원한다면 배열로 명명 될 수 있습니다. –
하나는 많은 피처 폰 및 모바일 웹 브라우저, 숫자 만 입력 방법에 대한 고유 제공하는 사용 가능한 더 나은 '유형'이 있다는 것입니다.
<input type="tel" ... />
그냥 숫자 입력을 원하는 경우
이는 모바일 브라우저 (아마 해결 방법이 나 모든 모바일 브라우저에서 작동하지 않습니다) "강제"하는 좋은 방법이 될 것으로 보인다. 입력을 필터링하고 유효성을 검사해야하지만 모바일 사용자에게는 더 나은 경험이 될 것이라고 생각합니다.는이 같은 간단한 입력을 제기 태그를 시도해야합니다 :
<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"/>
나에게 잘 보이는. 상자 사이에 다른 대시 ('–')를 사용하는 것이 좋습니다. – Pointy
오, 당신은 이미이 방법을 시도해 보았을 지 모르겠지만 많은 UI 사용자가 실제로는 플러시 - 왼쪽 양식을 좋아하지만 (이 경우) 오른쪽과 같이 "성"아래에 "성"과 함께 레이블이 붙습니다 . 개인적으로 나는 양면성이 있습니다. – Pointy
@pointy 나는 PSD에서 일하고있다. 그러나 나는 그것을 어딘가에서 읽었다 고 생각한다. –