HTML의 양식에 대한 정보

Javascript에서는 페이지의 각

태그 쌍이 양식 객체라는 객체로 구문 분석됩니다.

document.forms를 사용하면 문서에 있는 모든 양식 개체의 컬렉션을 소스 순서대로 가져올 수 있습니다.

如果一个表单对象定义如下：

获得该表单对象的方法：

  i>  document.forms["frm1"];   // 根据name属性值

 ii>  document.forms[0];        // 根据索引号

iii>  document.frm1;            // 直接根据name值获得对象

주의해야 할 양식 속성:

요소: 가져오기 다음 소스 소스별로 정렬된 특정 형식의 모든 컨트롤 모음입니다. 하지만 개체는 이 컬렉션에 없습니다.

var txtName = myform.elements[0];         //获得表单的第一个元素

var txtName = myform.elements["txtName"]; //获得name属性值为"txtName"的元素

var txtName = myform.elements.txtName;    //获得name属性值为"txtName"的元素

enctype: 양식의 배수를 설정하거나 가져옵니다. MIME(인터넷 메일 확장) 인코딩을 사용합니다.

파일을 업로드하려면 multipart/form-data로 설정해야 합니다.

각 양식 요소의 텍스트 설명에는

이 태그는 텍스트를 해당 양식 요소에 바인딩하는 데 사용됩니다. 해당 for 속성은 바인딩된 양식 요소의 id 값을 지정합니다. 바인딩 후 텍스트를 클릭하면 마우스가 해당 텍스트 상자에 초점을 맞추거나 해당 옵션을 선택합니다.

특정 데스크탑 테마가 설치된 경우 일부 양식 요소도 색상을 변경하여 메시지를 표시하므로 사용자 경험이 크게 향상됩니다.

샘플 코드:

참고:

i > 각 양식 요소는 태그를 사용하여 사용자 환경을 개선해야 합니다.

ii > 각각의 각 양식 요소에는 name 속성과 id 속성이 할당되어야 합니다.

name 속성: 서버에 데이터를 제출하는 데 사용됩니다.

id 속성: 클라이언트에서 다음과 같은 해당 작업을 수행하는 데 사용됩니다. 등.

                                  (name 속성과 id 속성은 가능하면 동일하거나 관련된 값을 사용해야 합니다.) 작업에서는 name 속성을 사용하는 것을 선호합니다.

일부 특정 양식 요소(예: 라디오 버튼 등)의 경우 이름 속성을 사용하여 요소 값을 얻는 것이 더 쉽고 서버에 데이터를 전송하는 것이 더 편리하기 때문입니다!

Javascript는 덜 일반적으로 사용되는 속성인 양식 양식 요소를 작동합니다.

defaultChecked는 확인란 또는 라디오 버튼 상태를 설정하거나 가져옵니다.

defaultValue는 객체의 초기 콘텐츠를 설정하거나 가져옵니다.

세트를 비활성화하거나 제어 상태를 가져옵니다.

양식 제출

양식 제출 예:

onclick="document.forms['frm'].submit();">

  onclick="this.disabled=true; this.form.submit();">

참고:

  

                              onclick="document.forms['frm'].submit();">

                              onclick="this.disabled=true; this.form.submit();">

i > 요소는 트리거되지 않습니다.

이는

ii > 또는 버튼의 클릭 이벤트 사용자가 제출 버튼을 반복적으로 클릭하는 동작을 비활성화하려면

서버의 응답 부담을 줄이기 위해

텍스트 상자 설정 🎜>i > 텍스트 상자의 문자 수를 제어합니다

참고: 여러 줄로 구성된 텍스트 상자 의 최대 길이는 사용자 정의 속성입니다. <textarea>에 문자를 입력하면 줄 바꿈도 한 문자로 계산됩니다. ;

ii > 마우스가 넘어가면 텍스트 상자가 자동으로 선택됩니다

window.onload = function(){

    var txtName = document.getElementsByName("myName")[0];

    txtName.onmouseover = function(){

       this.focus();

    };

    txtName.onfocus = function(){

       this.select();

    };

}

행동과 구조의 분리를 달성합니다.

라디오 버튼 설정

선택한 라디오 버튼 가져오기 및 선택한 라디오 버튼 설정

<script> </script>

//선택한 항목 가져오기

function getChoice(){

var oForm = document.forms["myForm1"];

//radioName은 라디오 버튼의 이름 속성 값입니다.

var aChoices = oForm.radioName;

//단일 선택 목록 전체를 탐색

for(i= 0 ;i

if(aChoices[i].checked)

break; 선택한 항목을 찾으면 종료

Alert("선택한 항목은 다음과 같습니다: "+aChoices[i].value);

}

//선택한 항목 설정

function setChoice(_num){

var oForm = document.forms["myForm1"];

//radioName은 라디오 버튼의 name 속성 값입니다.

oForm.radioName[_num].checked = true; //다른 옵션의 체크값은 자동으로 false로 설정됩니다.

} td>

<script></script>

//获取选中项

function getChoice(){

    var oForm = document.forms["myForm1"];

    //radioName是单选按钮的name属性值

    var aChoices = oForm.radioName;

    //遍历整个单选项表

    for(i=0;i

        if(aChoices[i].checked)   

            break; //如果发现了被选中项则退出

    alert("您选中的是："+aChoices[i].value);

}

//设置选中项

function setChoice(_num){

    var oForm = document.forms["myForm1"];

    //radioName是单选按钮的name属性值

    oForm.radioName[_num].checked = true; //其它选项的checked值会自动设置为false

}

            //调用代码
           

​ ​ ​ //호출 코드

동일한 라디오 버튼 그룹의 name 속성 값이 동일한지 확인해야 합니다.

체크박스 설정

체크박스를 "모두 선택", "모두 선택 취소" 및 "선택 반전" 기능으로 설정

<script></script>

function changeBoxes(_action){

    var myForm = document.forms["myForm1"];

    //myCheckbox 为所有复选框的name属性值

    var oCheckBox = myForm.myCheckbox;

    for(var i=0;i

        if(_action 

            oCheckBox[i].checked = !oCheckBox[i].checked;

        else 

            //_action为1是则全选,为0时则全不选

            oCheckBox[i].checked = _action;

}

aa

bb

드롭다운 목록 상자 설정

드롭다운 목록 상자의 다중 속성 드롭다운 목록을 설정하거나 가져오는 데 사용됩니다. 상자에서 여러 옵션을 선택할 수 있는지 여부입니다.

드롭다운 목록 상자는 기본적으로 하나의 항목만 선택할 수 있습니다. 여러 항목을 선택하도록 설정하려면 을 선택하세요.

유형 속성: JavaScript 언어는 유형 속성의 값을 기반으로 드롭다운 목록 상자 선택 컨트롤의 유형을 가져옵니다.

type 속성의 값은 select-multiple 또는 select-one입니다(참고: 드롭다운 목록 상자의 유형은 multiple 속성에 의해 제어됩니다).

i > 드롭다운 목록 상자의 옵션(단일 옵션 및 다중 옵션)

<script></script>

function getSelectValue(_myselect){

    var oForm = document.forms["myForm1"];

    //根据参数(下拉列表框的name属性值)获得下拉菜单项

    var oSelectBox = oForm.elements[_myselect];

    //判断是单选还是多选

    if(oSelectBox.type == "select-one"){

        var iChoice = oSelectBox.selectedIndex;    //获取选中项

        alert("单选，您选中了" + oSelectBox.options[iChoice].text);

    }

    else{

        var aChoices = new Array();

        //遍历整个下拉菜单

        for(var i=0;i

            if(oSelectBox.options[i].selected)//如果被选中

              //压入到数组中

              aChoices.push(oSelectBox.options[i].text);

        //输出结果

        alert("多选，您选了：" + aChoices.join());

    }

}

    AA

    BB

    CC

ii > 드롭다운 목록 상자 옵션 추가

끝에 새 옵션 추가

<script></script>

function AddOption(Box){ //追加选项到末尾

    var oForm = document.forms["myForm1"];

    var oBox = oForm.elements[Box];

    var oOption = new Option("乒乓球","Pingpang");

    oBox.options[oBox.options.length] = oOption;

}

지정된 위치에 새 옵션 삽입

<script></script>

function AddOption(_select,_num){

    var oForm = document.forms["myForm1"];

    var oBox = oForm.elements[_select];

    var oOption = new Option("text值","value值");

    //兼容IE7，先添加选项到最后，再移动

    oBox.options[oBox.options.length] = oOption;

    oBox.insertBefore(oOption,oBox.options[_num]);

}

참고: 사용하는 경우 직접 insertBefore() 메서드가 옵션을 삽입하면 IE에 빈 옵션 버그가 나타납니다. IE의 이러한 버그를 해결하려면 새 옵션을 맨 끝에 추가한 후 insertBefore() 메서드를 사용하여 해당 위치로 이동하면 됩니다.

이와 비슷합니다. 브라우저의 특정 버그나 제한 사항을 우회하고 의도한 목적을 달성하기 위해 일반적으로 작은 트릭을 해킹이라고 합니다.

iii > oBox.options를 통해

<script></script>

//替换选项

function ReplaceOption(_select,_num){

    var oForm = document.forms["myForm1"];

    var oBox = oForm.elements[_select];

    var oOption = new Option("text值","value值");

    oBox.options[_num] = oOption; //替换第_num 个选项

}

교체 _num] = oOption은 지정된 위치의 옵션을 생성된 새 옵션으로 직접 대체합니다.

iv > oBox 옵션을 통해 직접

<script></script>

function RemoveOption(_select,_num){

    var oForm = document.forms["myForm1"];

    var oBox = oForm.elements[_select];

    oBox.options[_num] = null;    //删除选项

}

......

옵션을 삭제하세요. [_num] = 삭제 옵션이 null입니다.

위 내용은 HTML의 양식에 대한 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!