Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Tạo các trường nhập liệu với JavaScript hướng đối tượng
URL: https://www.javascriptbank.com/javascript-oop-form-input-fields-maker.html
Lập trình hướng đối tượng (OOP) và DOM là những cách thức (kĩ thuật) lập trình đang dần trở nên phổ biến rộng rãi hơn, và ngôn ngữ JavaScript cũng đã hỗ trợ hướng đối tượng khá mạnh (mặc dù chưa được xem là hướng đối tượng chính thống).Hiển nhiên jsB@nk cũng không muốn đứng ngoài xu thế này, do đó bắt đầu từ bài viết này, jsB@nk sẽ cố gắng giới thiệu đến bạn các ý tưởng, ví dụ mẫu lập trình JavaScript hướng đối tượng thường được sử dụng rộng rãi.Đây là ví dụ mẫu JavaScript OOP đầu tiên từ hoạt động này, tuy chủ đề không mới - tạo các đối tượng chấp nhận dữ liệu người dùng - nhưng được thực hiện với các kĩ thuật mới, vui lòng vào ví dụ mẫu để xem thêm.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Tạo các trường nhập liệu với JavaScript hướng đối tượng
URL: https://www.javascriptbank.com/javascript-oop-form-input-fields-maker.html
<style type="text/css">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/#formGoesHere { margin: 20px; padding: 10px; background-color: #ffedaf; width: 225px; height: 260px;}</style><script type="text/javascript">// Created by: Matt Murphy | http://www.matts411.com/// This script downloaded from www.JavaScriptBank.com//////////////////////////////////////////////////////////////////// For questions, comments and a live demo - please visit:// http://www.matts411.com/webdev/creating_form_elements_with_javascript//////////////////////////////////////////////////////////////////function createDOMForm(targetId, actionURL) { // Where the form will be placed into the page parentElement = document.getElementById(targetId) parentElement.innerHTML = "" // Create a form myForm = document.createElement('FORM') myForm.method = 'post' myForm.action = actionURL myForm.setAttribute('Name', 'myForm') myForm.id = 'myForm' // Create a radio selection radioField = document.createElement('INPUT') radioField.type = 'radio' radioField.value = 'true' radioField.setAttribute('Checked', 'true') radioField.setAttribute('Name', 'myRadio') myForm.appendChild(radioField) myForm.appendChild(document.createTextNode('true')) myForm.appendChild(document.createElement('BR')) radioField = document.createElement('INPUT') radioField.type = 'radio' radioField.value = 'false' radioField.setAttribute('Name', 'myRadio') myForm.appendChild(radioField) myForm.appendChild(document.createTextNode('false')) myForm.appendChild(document.createElement('BR')) // Create a checkbox checkbox = document.createElement('INPUT') checkbox.type = 'checkbox' checkbox.setAttribute('Name', 'myCheckbox') myForm.appendChild(checkbox) myForm.appendChild(document.createTextNode('check?')) // Create a text field textField = document.createElement('INPUT') textField.type = 'text' textField.setAttribute('value', 'text field') textField.setAttribute('Name', 'myTextField') textField.style.display = 'block' myForm.appendChild(textField) // Create a textarea textArea = document.createElement('TEXTAREA') textArea.appendChild(document.createTextNode('text area')) textArea.setAttribute('Name', 'myTextArea') textArea.style.display = 'block' myForm.appendChild(textArea) // Create a drop-down list dropDown = document.createElement('SELECT') dropDown.setAttribute('Name', 'myDropDown') dropDown.style.display = 'block' for(i=1; i<11; i++) { option = document.createElement('option') option.value = 'myOption' + i if(i==4) { option.setAttribute('selected', 'true') } option.appendChild(document.createTextNode('Option ' + i)) dropDown.appendChild(option) } myForm.appendChild(dropDown) // Create a multi select drop-down list dropDownMulti = document.createElement('SELECT') dropDownMulti.setAttribute('Name', 'myDropDownMulti[]') // The [] addon is for rails dropDownMulti.id = 'myDropDownMulti' // Assigned because it needs to be accessed later by IE6 dropDownMulti.size = 4 dropDownMulti.typeName = 'multiple' dropDownMulti.multiple = 'true' dropDownMulti.style.display = 'block' for(i=1; i<11; i++) { option = document.createElement('option') option.appendChild(document.createTextNode('Option ' + i)) option.value = 'myOption' + i if(i==2 || i==4) { option.setAttribute('selected', 'true') } dropDownMulti.appendChild(option) } myForm.appendChild(dropDownMulti) // Create a submit button newButton = document.createElement('INPUT') newButton.type = 'submit' newButton.setAttribute('Name', 'submit') newButton.value = 'Submit' newButton.style.display = 'block' myForm.appendChild(newButton) // Place the form into the page parentElement.appendChild(myForm) // Bit o IE bug fixin' if(navigator.appVersion.indexOf("MSIE") != -1) { // Fixes the name issue, event handling, and rendering bugs! parentElement.innerHTML = parentElement.innerHTML // Bug fix for multi selects with more than one selection in IE6 if(navigator.appVersion.indexOf("MSIE 6.0") != -1) { multiOptions = document.getElementById('myDropDownMulti').options for(i=0; i<multiOptions.length; i++) { if(i==1 || i==3) { multiOptions[i].setAttribute('selected', 'true') } } } }}</script><p><input type="button" onclick="createDOMForm('formGoesHere', 'test.htm')" value="Create Form"></p><div id="formGoesHere"></div>