Found 2202 Articles for HTML

HTML DOM Select remove() Method

AmitDiwan
Updated on 30-Jul-2019 22:30:26

130 Views

The HTML DOM select remove() method removes a new option from a drop-down list in an HTML document.SyntaxFollowing is the syntax −object.remove(index)Here, index represents the index of the option which is to be removed from the drop-down list.ExampleLet us see an example of HTML DOM select remove() method − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100%;    }   ... Read More

HTML DOM Select add() Method

AmitDiwan
Updated on 30-Jul-2019 22:30:26

172 Views

The HTML DOM select add() method adds a new option to a drop-down list in an HTML document.SyntaxFollowing is the syntax −object.add(option, index)ExampleLet us see an example of HTML DOM select add() method − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.1rem;    }    .drop-down{     ... Read More

HTML DOM Select selectedIndex Property

AmitDiwan
Updated on 01-Jul-2020 09:56:58

184 Views

The HTML DOM select selectedIndex property returns and modify the index of selected option of the drop-down list in an HTML document.SyntaxFollowing is the syntax −Returning selectedIndexobject.selectedIndexModifying selectedIndexobject.selectedIndex = “number”ExampleLet us see an example of HTML DOM select selectedIndex property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100%;    }    p{       font-weight:700;       ... Read More

HTML DOM Select autofocus Property

AmitDiwan
Updated on 01-Jul-2020 09:58:20

119 Views

The HTML DOM select autofocus property returns and modify whether the drop-down list should get focused or not when page load.SyntaxFollowing is the syntax −1. Returning autofocusobject.autofocusModifying autofocusobject.autofocus = true | falseExampleLet us see an example of HTML DOM select autofocus property − Live Demo HTML DOM autofocus property    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100vh;    }    p{       font-weight:700;       font-size:1.1rem;   ... Read More

HTML DOM Select form Property

AmitDiwan
Updated on 01-Jul-2020 09:59:13

186 Views

The HTML DOM select form property returns the reference of the form that contain the drop-down list.SyntaxFollowing is the syntax −object.formExampleLet us see an example of HTML DOM select form property − Live Demo    body{       text-align:center;       background-color:#363946;       color:#fff;    }    form{       margin:2.5rem auto;       border:1px solid #fff;       padding:2rem;    }    .drop-down{       display:block;       width:35%;       border:2px solid #fff;       font-weight:bold;       padding:2px;       margin:1rem auto; ... Read More

HTML DOM Input Date step Property

AmitDiwan
Updated on 13-Jun-2020 10:49:14

255 Views

The HTML DOM Input Date step property determines the legal day intervals to choose from when user opens the calendar. It sets or returns the input date step attribute value.SyntaxFollowing is the syntax −Returning number valueinputDateObject.stepSetting value attribute to a number valueinputDateObject.step = numberExampleLet us see an example of Input Date step property − Live Demo Input Date required Odd Days Calendar:    var divDisplay = document.getElementById("divDisplay");    var inputDate = document.getElementById("dateSelect");    divDisplay.textContent = 'Current step: '+inputDate.step; OutputThis will produce the following output. Here, step was set to 2 −

HTML DOM Input Date required Property

AmitDiwan
Updated on 30-Jul-2019 22:30:26

163 Views

The HTML DOM Input Date required property determines whether Input date is compulsory to set or not.SyntaxFollowing is the syntax −Returning boolean value - true/falseinputDateObject.requiredSetting required to booleanValueinputDateObject.required = booleanValueBoolean ValuesHere, “booleanValue” can be the following −booleanValueDetailstrueIt defines that it is compulsory to set the date field to submit form.falseIt is the default value and to set date field is not compulsory.ExampleLet us see an example of Input Date required property − Live Demo Input Date required Name:  Date of Birth:  Confirm    var divDisplay = document.getElementById("divDisplay");    var inputDate = document.getElementById("dateSelect");    function submit() {   ... Read More

HTML DOM Input Date readOnly Property

AmitDiwan
Updated on 30-Jul-2019 22:30:26

186 Views

The HTML DOM Input Date readOnly property sets/returns whether Input Date can be modified or not.SyntaxFollowing is the syntax −Returning boolean value - true/falseinputDateObject.readOnlySetting readOnly to booleanValueinputDateObject.readOnly = booleanValueBoolean ValuesHere, “booleanValue” can be the following −booleanValueDetailstrueIt defines that the input date is readOnly.falseIt defines that the input date is not readOnly and can be modified.ExampleLet us see an example of Input Date readOnly property − Live Demo Input Date readOnly Final Exam Date: Confirm Date    var divDisplay = document.getElementById("divDisplay");    var inputDate = document.getElementById("dateSelect");    divDisplay.textContent = 'Exam Date Finalized: '+inputDate.readOnly;   ... Read More

HTML DOM Input Date Object

AmitDiwan
Updated on 30-Jul-2019 22:30:26

207 Views

The HTML DOM Input Date Object represents an input HTML element with type date.SyntaxFollowing is the syntax −Creating an with type datevar dateObject = document.createElement(“input”); dateObject.type = “date”;AttributesHere, “dateObject” can have the following attributes −AttributesDescriptionautocompleteIt defines the value of autocomplete attribute of a date fieldautofocusIt defines if the date field should be focused on initial page load.defaultValueIt sets/returns the default value of date fielddisabledIt defines if date field is disabled/enabledformIt returns a reference of enclosing form that contains the date fieldmaxIt returns/sets the value of max attribute of date fieldminIt returns/sets the value of min attribute of date fieldnameIt ... Read More

HTML DOM Input Date min Property

AmitDiwan
Updated on 30-Jul-2019 22:30:26

154 Views

The HTML DOM Input Date min property returns/sets min attribute of Input date type.SyntaxFollowing is the syntax −Returning string valueinputDateObject.minSetting min to string valueinputDateObject.min = YYYY-MM-DDString ValuesHere, “YYYY-MM-DD” can be the following −stringValueDetailsYYYYIt defines year (eg:1998)MMIt defines month (eg: 05 for May)DDIt defines Day (eg: 24)ExampleLet us see an example of Input Date min property − Live Demo Input Date Min Date Select:  Change Min Date    var inputDate = document.getElementById("date");    var divDisplay = document.getElementById("divDisplay");    divDisplay.textContent = 'Min of date input: '+inputDate.min;    function getMinDate() {       var oldInputDate = inputDate.max;       inputDate.min = '1998-07-01';       divDisplay.textContent = 'Min of date input: ... Read More

Advertisements