�t�H�[��֘A�v�f�i�I�j HTML5�Ŏd�l�ɂȂ��͒l�`�F�b�N�{�֗��3Tips�FHTML5�g�Ƃ��h�A�v��J��i9�j�i1/3 �y�[�W�j

» 2011�N04��25�� 00��00�� J

[��Ώr��C��ЃI�[�v��E�F�u�E�e�N�m��W�[]

�@HTML5�ŋ��ꂽ��̓t�H�[��Ɋւ��b��́A��ł��I��Ƃ��܂��B��܂ł�3��ŁA��input��v�f�ɉ��ꂽ�ύX�ƁA�V��ɒǉ��ꂽ��form��֘A�̗v�f�ɂ��Ă��b��Ă��܂��B

�@��̘b��́A�t�H�[��̓��͒l�`�F�b�N�i�o��f�[�V��j��ɂȂ�܂��B�܂��Aautofocus��form��ȂǁA��܂ł̋L��ŐG��Ȃ��e��Љ��Ǝv��܂��B

HTML5�ł͓��͒l�`�F�b�N�̎d�g�݂��g�d�l�h��

�@HTML 4�܂ł́A�t�H�[��ɓ��͂��ꂽ�l��`�F�b�N��d�g�݂��قƂ�ǔ��Ă��܂��ł��B��̂��߁A��͒l�̃`�F�b�N�͊�{�I�ɃT�[�o�T�C�h�ł̂ݍs��AJavaScript��p��ă`�F�b�N��K�v��܂��B

�@��A�T�[�o�T�C�h�ł̂݃`�F�b�N��s��ꍇ�́A��T�[�o�Ƃ̒ʐM��o�Ȃ��Ɠ��͒l�̃G��[�ɋC�t��Ȃ��߁A��[�U�r��e�B�𑹂˂܂��B

�@�܂��AJavaScript��p��`�F�b�N�́A�u�`�F�b�N�̂��߂̃R�[�h��ώG�ɂȂ�v�uJavaScript��I�t�ɂ��Ƌ@�\��Ȃ��v�u��͒l�ɐ��邱�Ƃ��}�[�N�A�b�v��ǂݎ��Ȃ��v�Ƃ��_��܂��B

�@HTML5��́A��͒l�`�F�b�N�̎d�g�݂��d�l�ɑg�ݍ��܂�A��L�̂悤�Ȗ��\�ɂȂ��Ă��܂��B��A�N��C�A��g�T�C�h�ł̓��͒l�`�F�b�N��e�ՂɂȂ��Ƃ��āA�T�[�o��ł̃`�F�b�N��ӂ��Ă��Ƃ��킯�ł͂��܂��񂪁AJavaScript��قƂ�Ǘp��ɓ��͒l�`�F�b�N��\�ɂȂ��Ƃ͑傫�Ȑi��ł��B

HTML5�ŉ��6�̓��͒l�`�F�b�N�^��@

�@HTML5�ŉ��͒l�`�F�b�N�^��͒l��̕��@�́A�ȉ��̂悤�Ȃ��̂��܂��B

�@��̐��p��ƁA�t�H�[��M��ɐ��ɏ]��`�F�b�N��I�ɍs��܂��B��͒l��Ó��łȂ��ꍇ�A�t�H�[��M�͍s��ꂸ�AWeb�u��E�U��ƂɈقȂ�UI�ŃG��[��b�Z�[�W��\��܂��B

�@�Ⴆ�Έȉ��̉摜�́A�K�{��͂̃`�F�b�N�Ɉ��Ԃł��B

�i�摜��Firefox 4�j

�@�܂��A�t�H�[��M��Ɏ��I�Ƀ`�F�b�N��s��邾��ł͂Ȃ��AJavaScript��p��ē��͒l�`�F�b�N�𖾎��I�ɍs��Ƃ��\�ł��B

�y1�zrequired��ɂ��͕K�{��

�@��̑��input��v�f�A��textarea��v�f�A��select��v�f�ɑ΂��ĕt�^��ƁA�l�̓��͂�K�{�ɂł��܂��B�ȉ��̗��required��g�p��ʂ�\��Ă��܂��BOpera 11�AFirefox 4�AChrome 10�ł̓��m�F��܂��iIE�ASafari�ł͓��삵�܂��j�B

<!DOCTYPE html>
<meta charset=UTF-8>
<form>
  <label for="name">�����O:</label>
  <input type="text" id="name" name="name" required><br>
  <label for="gender">����:</label>
  <select name="gender" required>
    <option></option>
    <option value="0">�j��</option>
    <option value="1">����</option>
  </select><br>
  <input type="submit" value="���M">
</form>

$��͂��ɑ��M�{�^��ƁA�G��[��b�Z�[�W��\��i�摜��Chrome 10�̂��́j �i��̉摜��N��b�N��ƁAWeb�u��E�U�ŕ\��܂��j$ ��͂��ɑ��M�{�^��ƁA�G��[��b�Z�[�W��\��i�摜��Chrome 10�̂��́j �i��̉摜��N��b�N��ƁAWeb�u��E�U�ŕ\��܂��j

��͂��ɑ��M�{�^��ƁA�G��[��b�Z�[�W��\��i�摜��Chrome 10�̂��́j �i��̉摜��N��b�N��ƁAWeb�u��E�U�ŕ\��܂��j

$required��́�select��v�f�ɂ��p�\$ required��́�select��v�f�ɂ��p�\

�y2�zpattern��ɂ��͒l�̃p�^�[��

�@��input��v�f�ɑ΂��pattern��w�肷��ƁA��͒l�̃p�^�[��𐳋K�\��Ŏw��ł��܂��B��p�ł��鐳�K�\��́AJavaScript�ŗ��p�\�Ȃ��̂Ɠ��l�ł��B

�@�ȉ��̗�́A�X�֔ԍ��u123-4567�v�Ƃ��`��œ��͂��邽�߂ɁApattern��g�p��Ă��܂��BChrome 10�AFirefox 4�AOpera 11�ł̓��m�F��܂��B

<!DOCTYPE html>
<meta charset=UTF-8>
<form>
  <label for="zipCode">�X�֔ԍ�:</label>
  <input type="text" id="zipCode" name="zipCode" pattern="\d{3}-?\d{4}" placeholder="123-4567"><br>
  <input type="submit" value="���M">
</form>