Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Формы и javascript. FORM

Содержание:

  1. Работа с формами на javascript
  2. Как я могу использовать select box как навигационное меню?
  3. Как я могу использовать картинку для кнопки submit?
  4. Как я могу передавать данные между формами на различных страницах, используя JavaScript?
  5. Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?
  6. Как мне получить значение выбранной в данный момент radio button в radio group или группе checkboxes?
  7. Как мне получить форму, чтобы инициировать процесс запуска клавишей Enter?
  8. Как я могу отключить поле текстового ввода?
  9. Как сделать загрузку страницы при выборе флажка?
  10. Сохранение данных в локальное хранилище браузера?
  11. Особенности onClick, onSubmit, onReset
  12. DOM объект элемента INPUT

Работа с формами

Сейчас мы поговорим о различных приемах работы сценариев JavaScript с HTML-формами.

Если в HTML-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом NAME тега FORM.

Свойства форм

Форма имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.

Свойства первого набора

  • action. Значение атрибута ACTION тега FORM.
  • encoding. Значение атрибута ENCTYPE тега FORM.
  • method. Значение атрибута METHOD тега FORM.
  • target. Значение атрибута TARGET тега FORM.
  • elements. Массив всех элементов формы.
  • length. Размер массива elements.

Большинство свойств первого набора просто отражает значение соответствующих атрибутов тега FORM. Что же касается массива elements, то в нем находятся объекты, соответствующие элементам, определенным в форме. Эти объекты образуют второй набор свойств формы. Адресоваться к этим объектам можно как к элементам массива elements, причем первому элементу формы будет соответствовать элемент с индексом 0, второму - с индексом 1 и т.д. Однако удобнее обращаться к элементам формы по их именам, заданным атрибутом NAME.

Элементы форм

Кнопки (BUTTON, RESET, SUBMIT)

Свойства

  • name. Имя объекта.
  • value. Надпись на кнопке.

Метод

  • click( ). Вызов этого метода тождественен щелчку мышкой по кнопке.

Пример

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script>
        <!--
        function btnClick()
        {
            var Txt1 = "";
            var Txt2 = "";
            Txt1 = document.Test.bt.value;
            Txt2 = document.Test.bt.name;
            document.getElementById('ex1').innerHTML="<HR>"+
                "Вы нажали кнопку: " + Txt1.bold() +
                " с именем: "  + Txt2.bold() +"<HR>";
        }
        //-->
    </script>
</head>
<body>
<H1>Нажатие кнопки</H1>
<div id="ex1"></div>
<FORM NAME="Test">
    <INPUT TYPE="button" NAME="bt" VALUE="Щелкни здесь!"
        onClick="btnClick();">
</FORM>
</body>
</html>

РЕЗУЛЬТАТ:

Нажатие кнопки

Флажок (CHECKBOX)

Свойства

  • name. Имя объекта.
  • value. Надпись на кнопке.
  • checked. Состояние флажка: true - флажок установлен, false - флажок не установлен.
  • defaultChecked. Отражает наличие атрибута CHECKED: true - есть, false - нет.

Метод

  • click( ). Вызов этого метода меняет состояние флажка.

Пример

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<H1>Метод click флажка</H1>
<FORM NAME="Test">
    Флажок <INPUT TYPE="checkbox" NAME="ch">
    <BR>Состояние флажка можно изменить и этой кнопкой
    <INPUT TYPE="button" VALUE="Смена состояния"
           onClick="document.Test.ch.click();">
</FORM>
</body>
</html>

РЕЗУЛЬТАТ:

Метод click флажка

Флажок Состояние флажка можно изменить и этой кнопкой

Переключатель (RADIO)

Свойства

  • name. Имя объекта.
  • value. Надпись на кнопке.
  • length. Количество переключателей в группе.
  • checked. Состояние переключателя: true - переключатель включен, false - выключен.
  • defaultChecked. Отражает наличие атрибута CHECKED: true - есть, false - нет.

Метод

  • click( ). Вызов этого метода включает переключатель.

Так как группа переключателей имеет одно имя NAME, то к переключателям надо адресоваться как к элементам массива.

Пример

<html>
<head>
    <meta http-equiv="Content-Type"  content="text/html; charset=utf-8">
    <script><!--
        function btnClick()
        {
            if(document.Test1.Sex[0].checked){
                document.Test1.Sex[1].click();
            }else{
                document.Test1.Sex[0].click();
            }
        }
        //-->
    </script>
</head>
<body>
<H1>Метод click группы переключателей</H1>
<FORM NAME="Test1">
    <INPUT TYPE="RADIO"  NAME="Sex" VALUE ="Man" CHECKED>Мужской
    <INPUT TYPE="RADIO"  NAME="Sex" VALUE ="Woman">Женский
    <BR>Состояние переключателей можно изменить и этой кнопкой
    <INPUT TYPE="button" VALUE="Смена состояния" onClick="btnClick();">
</FORM>
</body>
</html>

РЕЗУЛЬТАТ:

Метод click группы переключателей

Мужской Женский
Состояние переключателей можно изменить и этой кнопкой

Список (SELECT)

Свойства

  • name. Имя объекта.
  • selectedIndex. Номер выбранного элемента или первого среди выбранных (если указан атрибут MULTIPLE).
  • length. Количество элементов (строк) в списке.
  • options. Массив элементов списка, заданных тегами OPTION.

Каждый элемент массива options является объектом со следующими свойствами:

  • value. Значение атрибута VALUE.
  • text. Текст, указанный после тега OPTION.
  • index. Индекс элемента списка.
  • selected. Присвоив этому свойству значение true, можно выбрать данный элемент.
  • defaultSelected. Отражает наличие атрибута SELECTED: true - есть, false - нет.

Методы

  • focus( ). Передает списку фокус ввода.
  • blur( ). Отбирает у списка фокус ввода.

Пример

<html>
<head>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
    <script><!--
        function btnClick2()
        {
            var sI=document.Test2.Item.selectedIndex;
            var Txt="";
            Txt="Предложено "+document.Test2.Item.length+" напитков"+
                "\nВыбран "+document.Test2.Item.options[sI].text+
                " (value= "+document.Test2.Item.options[sI].value+
                ", index= "+document.Test2.Item.options[sI].index+")";
            if(document.Test2.Item.options[sI].defaultSelected)
                {Txt+="\nЭтот напиток выбирается по умолчанию";}
                alert(Txt);
            }
        //-->
    </script>
</head>
<body>
<H1>Работа с готовым списком</H1>
<FORM NAME="Test2">
    <SELECT NAME="Item" SIZE=5>
        <OPTION VALUE="tea" SELECTED>Чай
        <OPTION VALUE ="coffee">Кофе
        <OPTION VALUE ="milk">Молоко
        <OPTION VALUE ="cocoa">Какао
        <OPTION VALUE ="juice">Сок
    </SELECT>
    <INPUT TYPE="button" VALUE="Пусть кофе"
           onClick="Test2.Item.options[1].selected=true;">
    <INPUT TYPE="button" VALUE="Посмотрим"
           onClick="btnClick2();">
</FORM>
</body>
</html>

РЕЗУЛЬТАТ:

Работа с готовым списком

Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй - значение элемента списка, соответствующее значению атрибута VALUE, третий соответствует свойству defaultSelected, четвертый - свойству selected.

Пример

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<H1>Динамическое заполнение списка</H1>
<FORM NAME="Sel">
    <!-- Пустой список ссылок-->
    <SELECT NAME="ListOfLinks">
    </SELECT>
    <!-- Кнопка активизации выбранной ссылки-->
    <INPUT TYPE="button" VALUE="Переход"
           onClick="window.location.href=document.links[Sel.ListOfLinks.selectedIndex];">
</FORM>
<A HREF="http://kdg.HtmlWeb.ru"></A>
<A HREF="http://www.dstu.edu.ru/"></A>
<A HREF="http://sp2all.ru/"></A>
<A HREF="http://www.VseTaksi.ru/"></A>
<script><!--
    // Цикл по всем ссылкам
    for(i=0; i<document.links.length; i++)
    {   // Создание i-элемента списка и запись в него ссылки
        document.Sel.ListOfLinks.options[i] = new Option(document.links[i], i, false, false);
    }
    // Выделение первого элемента в списке
    document.Sel.ListOfLinks.selectedIndex = 0;
    //-->
</script>
</body>
</html>

РЕЗУЛЬТАТ:

Динамическое заполнение списка



Поле ввода (TEXT)

Свойства

  • name. Имя объекта.
  • defaultValue. Начальное содержимое поля.
  • value. Текущее содержимое поля.

Методы

  • focus( ). Передает полю фокус ввода.
  • blur( ). Отбирает у поля фокус ввода.
  • select( ). Выделяет содержимое поля.

Пример

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script>
        <!--
        function Complete()
        {
            var Elem="Фамилия: " + document.Sel1.Family.value +
                "\nИмя: " + document.Sel1.Name.value +
                "\nВозраст: " + document.Sel1.Age.value +
                "\nТелефон: " + document.Sel1.Phone.value;
            alert(Elem);
        }
        function CheckAge(age)
        {
            if(age<18)
                return "18";
            else
                return  age;
        }
        //-->
    </script>
</head>
<body>
<H1>Заполните анкету</H1>
<FORM NAME="Sel1">
    <!-- Анкета -->
    <TABLE>
        <TR><TD><B>Фамилия:<B></TD>
            <TD><INPUT NAME="Family" SIZE=20
                  onBlur="this.value=this.value.toUpperCase()"></TD></TR>
        <TR><TD><B>Имя:<B></TD>
            <TD><INPUT NAME="Name" SIZE=20
                  onBlur="this.value=this.value.toUpperCase()"></TD></TR>
        <TR><TD><B>Возраст:<B></TD>
            <TD><INPUT NAME="Age" SIZE=3 VALUE="18"
                  onBlur="this.value=CheckAge(this.value)"
                  onFocus="this.select()"></TD></TR>
        <TR><TD><B>Телефон:<B></TD>
            <TD><INPUT NAME="Phone" SIZE=10></TD></TR>
    </TABLE>
    <!-- Кнопки готовности и сброса -->
    <INPUT TYPE="button" VALUE="Готово" onClick="Complete();">
    <INPUT TYPE="reset" VALUE="Сброс">
</FORM>
</body>
</html>

РЕЗУЛЬТАТ:

Заполните анкету

Фамилия:
Имя:
Возраст:
Телефон:

Обратите внимание на то, что символы фамилии и имени при потере фокуса соответствующими полями преобразуются в прописные. Для этого используется метод toUpperCase, определенный во встроенном классе строк.

Текстовая область (TEXTAREA)

Свойства

  • name. Имя объекта.
  • defaultValue. Начальное содержимое области.
  • value. Текущее содержимое области.

Методы

  • focus( ). Передает области фокус ввода.
  • blur( ). Отбирает у области фокус ввода.
  • select( ). Выделяет содержимое области.

Пример

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script>
        <!--
        var OK="Тетя Эльза чувствует себя хорошо.\nЮстас.";
        var Problem="Тетя Эльза заболела.\nЮстас.";
        function getDate()
        {
            var today=new Date();
            return today.toLocaleString()+"\n";
        }
        function CheckRadio(form,value)
        {
            if(value=="Good")
                form.Letter.value=getDate()+OK;
            else
                form.Letter.value=getDate()+Problem;
        }
        //-->
    </script>
</head>
<body lang=RU>
<H1>Отправьте телеграмму</H1>
<FORM NAME="Sel2">
    <label><INPUT TYPE="radio" NAME="Code" VALUE="Good"
                  onClick="if(this.checked) CheckRadio(this.form,this.value);"> Явка в норме
    </label>
    <BR>
    <label><INPUT TYPE="radio" NAME="Code" VALUE="Bad"
                  onClick="if(this.checked) CheckRadio(this.form,this.value);"> Явка провалена
    </label>
    <TEXTAREA NAME="Letter" ROWS=3 COLS=35>
    </TEXTAREA>
    <INPUT TYPE="button" VALUE="Готово" onClick="alert(document.Sel2.Letter.value);">
    <INPUT TYPE="reset" VALUE="Сброс">
</FORM>
</body>
</html>

РЕЗУЛЬТАТ:

Отправьте телеграмму


Для установки курсора в определенное место textarea-области используйте следующую кросбраузерную функцию:

<form>
    <textarea id="textArea">Это тестовая область</textarea>
    <input type="button" onclick="setCaretPosition('textArea', 5);" value="Установить курсор">
</form>
<script>
    function setCaretPosition(o, pos) {
        o=document.getElementById(o);
        if(o.setSelectionRange) {
            o.focus();
            o.setSelectionRange(pos,pos);
        }else if (o.createTextRange) { // IE
            var range = o.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    }

</script>

РЕЗУЛЬТАТ:

Поле ввода пароля (PASSWORD)

Свойства

  • name. Имя объекта.
  • defaultValue. Начальное содержимое поля.
  • value. Текущее содержимое поля.

Методы

  • focus( ). Передает полю фокус ввода.
  • blur( ). Отбирает у поля фокус ввода.
  • select( ). Выделяет содержимое поля.

Пример

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script><!--
        function Complete1()
        {
            if(document.Sel3.Pwd.value==document.Sel3.Pwd1.value)
                alert("Вас зарегистрировали\nID="+document.Sel3.Id.value+"\nPassword="+document.Sel3.Pwd.value);
            else
                alert("Ошибка при вводе пароля\nПопробуйте еще раз");
        }
        //-->
    </script>
</head>
<body>
<H1>Регистрация</H1>
<FORM NAME="Sel3">
    <TABLE>
        <TR><TD><B>Идентификатор:<B></TD>
            <TD><INPUT NAME="Id" SIZE=20
                       onBlur="this.value=this.value.toUpperCase()"></TD></TR>
        <TR><TD><B>Пароль:<B></TD>
            <TD><INPUT TYPE="password" NAME="Pwd" SIZE=20
                       onFocus="this.select();"></TD></TR>
        <TR><TD><B>Проверка пароля:<B></TD>
            <TD><INPUT TYPE="password" NAME="Pwd1" SIZE=20
                       onFocus="this.select();"></TD></TR>
    </TABLE>
    <INPUT TYPE="button" VALUE="Готово" onClick="Complete1();">
    <INPUT TYPE="reset" VALUE="Сброс">
</FORM>
</body>
</html>

РЕЗУЛЬТАТ:

Регистрация

Идентификатор:
Пароль:
Проверка пароля:


Как я могу использовать select box как навигационное меню?

При использовании простого JavaScript, вы можете использовать select box для передвижения по сайту. Рассмотрите этот пример:

<FORM name="navForm">
<select name="menu"
onChange = "self.location =
  document.navForm.menu[document.navForm.menu.selectedIndex].value;">
<option value="home.html">Home</option>
<option value="links.html">Links</option>
<option value="contact.html">Contact Info</option>
</select>
Просто сохраните URL различных страниц в option value. Обработчик события OnChange вызовет перенаправление расположения, когда значение в поле изменено.

Вы могли бы использовать этот код, чтобы изменить расположение другого фрейма изменением 'self.location =' на 'top.framename.location ='



Как я могу использовать картинку для кнопки submit?

Часто возникает вопрос: "Как инициировать форму по картинке, а не по кнопке submit?" Решение столь же просто, как этот пример:

<form>
<input type="image" name="cancel" src="cancel.gif" alt="Cancel!" border=0>
<input type="image" name="continue" src="continue.gif"
	alt="Click to Continue" border=0>
</form>
Когда нажимается любая кнопка, форма инициируется и координаты x/y щелчка мыши на кнопке загружаются в объект запроса. Например, если пользователь выбрал Cancel!, объект запроса будет содержать переменные cancel.x и cancel.y. Точно так же щелчок на Continue привел бы к переменным continue.x и continue.y.

Здесь важно отметить, что элементы .x и .y - не переменные объектов continue или cancel, а фактически часть имени "continue.x". Следовательно, нельзя использовать типичный метод для определения существования одного из дочерних объектов запроса:

if (request.normalItem)
  act();
if (request.continue.x) // Noooo! Produces horrible error messages!
  doContinuingThings();
Тем не менее рассмотрите это:
if (request['normalItem'])
  act();
if (<B>request['continue.x']</B>) // Much better :)
  doContinuingThings();
Благодаря названным массивам JavaScript, можно проверить какая картинка инициировала форму.

Для некоторых приложений, полезно знать координаты курсора на нажатой картинке. Эта информация, конечно, содержится в парах image_element.x и image_element.y. Следующий серверный JavaScript мог бы использоваться для этого:

x=0;
y=0;
if ((request['my_submit_image.x']) (request['my_submit_image.y'])) {
  x = parseInt(request['my_submit_image.x']);
  y = parseInt(request['my_submit_image.y']);
}


Передача данных между формами на различных страницах

В качестве простого примера, предположите, что ваша "домашняя" страница запрашивает имя пользователя, затем использует это имя, чтобы обратиться к пользователю на следующих страницах. Вы можете взять имя, используя форму, затем использовать JavaScript для передачи имени пользователя в следующую страницу, используя URL. Последующая страница могла бы затем анализировать имя пользователя из URL, используя информацию в document.search.


home.html

<html> <head> <script language="JavaScript">
function nextPage() {
 self.location = "next.html?name=" +
 	escape(document.theForm.userName.value);
 // Use escape() any time there might be spaces or
} // non-alpa characters
</script>
</head>
<body>
<form onSubmit = "nextPage();return false;">
Enter your name: <input type=text name=userName>
<input type=submit>
</form>
</body>
</html>

next.html
userName = document.search;
userName = userName.substring(userName.indexOf("=")+1);
document.write("Greetings, " + userName + "<P>");


Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?

Потому что объект работает не таким образом. Правильный и полный синтаксис для доступа к VALUE только что выбранным полем в списке - это:

Document.form.selectObject[document.form.selectObject.selectedIndex].value
Для доступак тексту элемента используйте свойство text:
Document.form.selectObject[document.form.selectObject.selectedIndex].text


Как мне получить значение выбранной в данный момент radio button в radio group или группе checkboxes?

Существует свойство, созданное в объекте form для каждой radio buttons или checkboxes с тем же самым именем. Например, следующий HTML код:

<form name='theForm'>
<input type=radio name="gender" value="Male">Male
<input type=radio name="gender" value="Female">Female
<input type=radio name="gender" value="Evasive">Not Specified
</form>
приводит к созданию 3-х элементов массива, вызываемых с помощью document.theForm.gender. Чтобы определить значение выбранной кнопки (или checkbox'а), вам нужно проверить свойство checked каждого из элементов. Например:
function checkIt() {
 theGroup = document.theForm.gender;
 for (i=0; i< theGroup.length; i++) {
     if (theGroup[i].checked) {
	 alert("The value is " + theGroup[i].value);
	 break;
	 }
     }
}

Для получения и установки значения radio button value на javascript можно использовать следующие функции:

function getCheckedValue(radioObj) {
    if(!radioObj)
        return "";
    var radioLength = radioObj.length;
    if(radioLength == undefined)
        if(radioObj.checked)
            return radioObj.value;
        else
            return "";
    for(var i = 0; i < radioLength; i++) {
        if(radioObj[i].checked) {
            return radioObj[i].value;
        }
    }
    return "";
}


function setCheckedValue(radioObj, newValue) {
    if(!radioObj)
        return;
    var radioLength = radioObj.length;
    if(radioLength == undefined) {
        radioObj.checked = (radioObj.value == newValue.toString());
        return;
    }
    for(var i = 0; i < radioLength; i++) {
        radioObj[i].checked = false;
        if(radioObj[i].value == newValue.toString()) {
            radioObj[i].checked = true;
        }
    }
}


Как мне получить форму, чтобы инициировать процесс запуска клавишей Enter?

Форма отправляется, если нажата клавиша enter, в то время как единственный входной текстовый элемент формы имеет фокус. Вы можете вызывать подобное поведение в форме, имеющей более одного элемента, разбивая форму на ряд отдельных форм, так, чтобы каждая форма имела только один текстовый элемент. Используйте обработчик события onSubmit (или action="javascript:myFunction();") для накопления данных из других форм в вашей странице и инициируйте их все сразу.



Как я могу отключить поле текстового ввода?

Используйте обработчик onfocus для вызова функции blur():

<INPUT TYPE="text" NAME="aTextField" ONFOCUS="this.blur()">
Если вы хотите динамически отключать/включать поле, используйте функцию skip (e)
{ this.blur(); }
  <A HREF="javascript:document.formName.aTextField.onfocus = skip; void
0">disable text field</A>
  <A HREF="javascript:document.formName.aTextField.onfocus = null; void
0">enable text field</A>


Как сделать загрузку страницы при выборе флажка?

Используйте обработчик OnChange для вызова функции submit():

<form method=get OnChange='this.submit();'>
  <input type=checkbox name="fnew">Только новые
</form>


Сохранение данных в локальное хранилище браузера:

sessionStorage — запоминает результат пока открыт сайт во вкладке(окне), можно свободно перемещаться по сайту, обновлять страницы, но не закрывать окно браузера(вкладку).

localStorage — запоминает результат на очень долгое время, пока пользователь не очистит локальное хранилище браузера. Можно через несколько дней зайти на сайт и увидеть ранее заполненную форму.

<style>
#idVhod {
  display: none; /* изначально скрыт */
}
</style>

<button onclick="onclickVhod()">открыть</button> <span id="idVhod">скрытый текст</span>

<script>
var idVhod = document.getElementById('idVhod');

function onclickVhod() {
idVhod.style.display = (idVhod.style.display == 'inline') ? '' : 'inline'
localStorage.setItem('hide', idVhod.style.display); // сохраняем значение в объект hide
}

if(localStorage.getItem('hide') == 'inline') { // если значение объекта hide "inline"
    document.getElementById('idVhod').style.display = 'inline';
}
//localStorage.removeItem('hide') // удалить один элемент
//localStorage.clear() // удалить все элементы

</script>


Особенности onClick, onSubmit, onReset

  • метод click() у гиперссылки — влечет за собой вызов обработчика onClick этой ссылки
  • метод click() у ЛЮБОЙ кнопки формы — влечет за собой вызов обработчика onClick этой кнопки
  • метод reset() у формы — влечет за собой вызов обработчика onReset у формы
  • НО метод submit() у формы — НЕ влечет за собой вызов обработчика onSubmit у формы!


DOM объект элемента INPUT:

interface HTMLInputElement : HTMLElement {
           attribute DOMString accept;
           attribute DOMString alt;
           attribute DOMString autocomplete;
           attribute boolean autofocus;
           attribute boolean defaultChecked;
           attribute boolean checked;
           attribute DOMString dirName;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  readonly attribute FileList? files;
           attribute DOMString formAction;
           attribute DOMString formEnctype;
           attribute DOMString formMethod;
           attribute boolean formNoValidate;
           attribute DOMString formTarget;
           attribute unsigned long height;
           attribute boolean indeterminate;
  readonly attribute HTMLElement? list;
           attribute DOMString max;
           attribute long maxLength;
           attribute DOMString min;
           attribute boolean multiple;
           attribute DOMString name;
           attribute DOMString pattern;
           attribute DOMString placeholder;
           attribute boolean readOnly;
           attribute boolean required;
           attribute unsigned long size;
           attribute DOMString src;
           attribute DOMString step;
           attribute DOMString type;
           attribute DOMString defaultValue;
           attribute DOMString value;
           attribute Date? valueAsDate;
           attribute double valueAsNumber;
           attribute unsigned long width;

  void stepUp(optional long n);
  void stepDown(optional long n);

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(DOMString error);

  readonly attribute NodeList labels;

  void select();
           attribute unsigned long selectionStart;
           attribute unsigned long selectionEnd;
           attribute DOMString selectionDirection;
  void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
};


Другие примеры работы с формами на javascript
Читать дальше: Методы и функции JavaScript