�t�H�[��֘A�v�f�i3�j �T�C�g�̃t�H�[��𑽋@�\�ɂ��HTML5�̐V�v�f5�I�FHTML5�g�Ƃ��h�A�v��J��i8�j�i1/2 �y�[�W�j

HTML5�̐V��form�֘A�v�f��A�o�͒l��f�[�^�̃��X�g�A�i��̎��o��A��J��Í��ȂǗp�r�ʂɃT��v��R�[�h�ƂƂ��ɏЉ�

» 2011�N04��05�� 00��00�� J

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

�V��ɒǉ��ꂽ5�̃t�H�[��֘A�v�f

�@�O��́uHTML5��input�v�f�ɒǉ��ꂽ�V��^�C�v13�A��v�܂ł́AHTML5�ɂ��input��v�f�ɑ΂��ĉ��ꂽ�ύX��Ă��܂��B��́A��input��v�f�ȊO�̃t�H�[��i��form��j�Ɋ֘A��V�v�f�ɂ��Č��Ă��܂��B��񂲏Љ��v�f�́A�ȉ��̂Ƃ��ł��B

�o�͒l��\��output��v�f

�@��output��v�f�́A�v��O��ɂ��Đ��ꂽ�o�͒l��\��v�f�ł��B��output��v�f��p��邱�ƂŁA�u��̕��͎��I�ɐ��ꂽ�l�ł��v�Ƃ��Ӗ��𖾊m�ɂł��܂��B

�@for��ɁA��̓��̓t�H�[��ID��w�肷�邱�ƂŁA�o�͒l�̌��ɂȂ��̓t�H�[��𖾎��I�Ɏw��ł��܂��Bfor��ɂ́A��ID��X�y�[�X�ŋ�؂��Ďw��ł��܂��B

�@�ȉ��̗�ł́A��[�U�[��2�̐��l��͂��A��̌v�Z��ʂ��I�ɎZ�o��܂��i��̃T��v��́AGoogle Chrome 9��Opera 11�AFirefox 4�œ��삵�܂��j�B

<!DOCTYPE html>
<meta charset="UTF-8">
�@
<input type="number" id="num1" placeholder="���l1"> +
<input type="number" id="num2" placeholder="���l2"> =
<!-- for������p���āAnum1��num2���琶�����ꂽ�l�ł��邱�Ƃ𖾎� -->
<output for="num1 num2" id="result"></output>
<!-- output�v�f��value�v���p�e�B�ɒl���w�肷��ƁA�o�͒l�����������邱�Ƃ��ł��� -->
<button onclick="document.getElementById('result').value =
                 parseInt(document.getElementById('num1').value, 10) +
                 parseInt(document.getElementById('num2').value, 10)">
  �v�Z
</button>

$�T��v��̎��s��ʁi�摜��Firefox 4�̂��́j�i��̉摜��N��b�N��ƁAWeb�u��E�U�ŕ\��܂��j$ �T��v��̎��s��ʁi�摜��Firefox 4�̂��́j�i��̉摜��N��b�N��ƁAWeb�u��E�U�ŕ\��܂��j

��output��v�f��l��g��ۂ̒��ӓ_

�@��output��v�f�́A�}�[�N�A�b�v��JavaScript�Ŏ�舵��̂ɔ��Ɉ��₷��݌v��s��Ă��܂��A�l�̎�舵��ɂ͏��ӂ��K�v�ł��B

�@��Łu�N�Z�v�Ɛ\��グ��Ƃ́A��Ă��܂��Δ��ɒP��ł��B��L�̃T��v��ł��Ƃ��A��output��v�f��p��ďo�͒l��}�[�N�A�b�v��ɂ́A�v�f�̓��ɒl��L�q��܂��B

<output id="o">�o�͒l</output>

�@��AJavaScript��p��ā�output��v�f�ɒl��ǂݏ��ɂ́A2�ʂ�̂��܂��BtextContent�v��p�e�B��p��ėv�f��̃e�L�X�g��擾��@�ƁAvalue�v��p�e�B��p��@�ł��B��output��v�f�ɂ��ẮAvalue��textContent�͂��݂��ɓ��l�ƂȂ�܂��B

    var output = document.getElementById("o");
    // �v�f���̃e�L�X�g��ύX����
    output.textContent = "�o�͒l";
    // value�v���p�e�B���Q�Ƃ���ƁA�l�́u�o�͒l�v�ƂȂ��Ă���
    alert(output.value);

�@�܂��A�ŏ��灃output��v�f�̓��ɋL�q��Ă��e�L�X�g�́u�f�t�H��g�l�v�Ƃ��ɂȂ�܂��B�t�H�[��Z�b�g�i��input type="reset"��g��ƁA��Z�b�g�{�^��ɂȂ�j��ہAtextContent�v��p�e�B�i��value�v��p�e�B�j�̒l��f�t�H��g�l�ɖ߂�܂��B

�@�ȉ��̗�ł́A�u�ύX�v�{�^��N��b�N��ƁA��output��v�f�̓��e��ω��A��Z�b�g�{�^��ƒl��ɖ߂�܂��B��̗�́AOpera 11�ł̂ݐ��삵�܂��iChrome 9��Firefox 4�ł́A��Z�b�g��ƁA��output��v�f�̓��e��ɂȂ�܂��j�B

<!DOCTYPE html>
<meta charset="UTF-8">
�@
<form>
  <output name="out">�f�t�H���g�l</output>
  <input type="button" onclick="form.out.value = '�ύX���ꂽ�l'" value="�ύX">
  <input type="reset">
</form>

$�T��v��̎��s��ʁi�摜��Opera 11�̂��́j �i��̉摜��N��b�N��ƁAWeb�u��E�U�ŕ\��܂��j$ �T��v��̎��s��ʁi�摜��Opera 11�̂��́j �i��̉摜��N��b�N��ƁAWeb�u��E�U�ŕ\��܂��j

�@�܂��A��܂藘�p��邱�Ƃ͂Ȃ��ł��傤��A�f�t�H��g�l��defaultValue�v��p�e�B�ł�JavaScript��Q�Ƃł��܂��BdefaultValue�v��p�e�B�ɂ́A�l��Z�b�g�ł��܂��B

��O��`��ꂽ�f�[�^�̃��X�g��datalist��v�f

�@��datalist��v�f�͕s��̗v�f�ŁA��option��v�f��C�Ӑ��L�q��邱�Ƃɂ��A��O��`��ꂽ�f�[�^�̃��X�g��\��܂��B��݂̎d�l�ł́u��input��v�f��list��Ɂ�datalist��v�f��ID��w�肷�邱�ƂŁA��͒l�̌��\��ł��v�ƒ�`��Ă��܂��B

�@�ȉ��̃T��v��s��ƁA��̓t�B�[��h�Ƀt�H�[�J�X��ہA��͒l�̌�₪�\��܂��iOpera 11��Firefox 4�œ��삵�܂��j�B

<!DOCTYPE html>
<meta charset="UTF-8">
�@
<!-- datalist�v�f��ID��list�����Ɏw�� -->
<input list="suggestions">
�@
<!--
  datalist�v�f���g�p�B�s���̗v�f�����A���Ή��u���E�U�ł͗v�f��
  ���e���\������Ă��܂��̂ŁACSS�Ŕ�\���ɂ��Ă���
-->
<datalist id="suggestions" style="display: none;">
  <option value="banana">�o�i�i</option>
</datalist>

$�T��v��̎��s��ʁi�摜��Firefox 4�̂��́j �i��̉摜��N��b�N��ƁAWeb�u��E�U�ŕ\��܂��j$ �T��v��̎��s��ʁi�摜��Firefox 4�̂��́j �i��̉摜��N��b�N��ƁAWeb�u��E�U�ŕ\��܂��j

��̐i��\��progress��

�@�@�@�@�@�@ 1|2 ��̃y�[�W��

SpecialPR