Version compl�te: jsB@nk » Form » POO JavaScript formulaire de saisie des champs Maker
URL: https://www.javascriptbank.com/javascript-oop-form-input-fields-maker.html
POO en JavaScript et DOM en JavaScript ne sont pas nouvelles techniques, ils sont de plus en plus populaire largement dans le monde des langages de programmation Et le langage de programmation JavaScript prend
Version compl�te: jsB@nk » Form » POO JavaScript formulaire de saisie des champs Maker
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>