Создание input type=text

@GhostLeopard · Регистрация: 11.05.2012

Студворк — интернет-сервис помощи студентам

Как создать такое поле?

HTML5
1
<input type="text" name="valuer">

Заранне спасибо!

@kalabuni · 14.05.2012, 15:32

Создать объект (тег) - не проблема.

Только надо знать - где именно его создавать:
--- нужно либо знать объект (тег), который станет для вновь созданного "родительским" и место вновь созданного объекта в коллекции "детей" этого "родителя" (первый, последний, где-то конкретно посерёдке);
--- либо нужно знать объект (тег), вместо которого появится вновь созданный;
--- либо нужно знать объект (тег), перед которым появится вновь созданный;
--- либо нужно знать объект (тег), после которого появится вновь созданный.

Так что вопрос ваш неполон.

@GhostLeopard · 14.05.2012, 17:07 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<html>
<head>
<title>Оценки</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
*   {
    margin: 0;
    padding: 0;
}
 
input       {
    width: 25px;
    height: 20px;
    margin-left: 10px;
    text-align: center;
    }
 
#checker    {
    width: 100px;
    height: 25px;
    margin-left: 200px;
}
 
#add    {
    width: 150px;
    height: 25px;
    position: absolute;
    margin-left: 360px;
    margin-top: -23px;
    
}
 
#adder  {
    width: 150px;
    margin-left: 0;
    height: 25px;
    font-size: 10px;
}
 
#add img    {
    margin-left: 61px;
    margin-top: 5px;
}
 
#valik  {
    width: 20px;
    height: 20px;
    position: absolute;
    margin-left: 520px;
    margin-top: -22px;
}
 
#valik p    {
    color: #66ff00;
    text-align: center;
    font-weight: 800;
}
</style>
<script type="text/javascript">
function check()    {
var cool = document.getElementsByName('valuer');
var a = new Array();
var bvc = 0;
var end = 1;
var zx = /[1-5]{1}/;
for(var j = 0; j<cool.length; j++)  {
    a[j] = document.former.valuer[j].value;
    }
for(var j = 0; j<cool.length; j++)  {
    if(a[j] == '' || zx.exec(a[j]) == null) {
        alert('Вы не заполнели одну из клеток или допустили ошибку!');
        document.former.valuer[j].style.backgroundColor = 'red';
        end = 0;
        continue;
    }else   {
        document.former.valuer[j].style.backgroundColor = 'white';
    }
}
if(end = 1) {
for(var j = 0; j<cool.length; j++)  {
    bvc = parseInt(cool[j].value) + parseInt(bvc);
}
}
bvc = Math.ceil(bvc / cool.length);
document.getElementById('valik').innerHTML = '<p>' + bvc + '</p>'
}
 
function Clear() { 
if(document.getElementById('adder').value = 'Добавить ячеек')  {
document.getElementById('adder').value = '';
}
}
 
function Default() { 
if(document.getElementById('adder').value == '')    {
    document.getElementById('adder').value = 'Добавить ячеек';
}
}
 
function addform()  {
    var a = document.getElementById('adder').value;
    a = parseInt('adder');
}
</script>
</head>
<body>
<form name="former">
<input type="text" name="valuer">
<input type="text" name="valuer">
<input type="text" name="valuer">
<input type="text" name="valuer">
<input type="text" name="valuer">
<input type="text" name="valuer">
<input type="text" name="valuer">
<input type="text" name="valuer">
<input type="text" name="valuer">
<div id="add">
<input type="text" id="adder" value="Добавить ячеек" onfocus="Clear()" onblur="Default()"><br>
<img src="plus.png" onclick="addform()">
</div>
<div id="valik">
</div>
<input type="button"id="checker" value="Рассчитать" onclick="check()">
</form>
</body>
</html>

Вводишь данные и нажимаешь на плюс, функция addform определяет количество запускате функции, и создает после последнего valuer.

@Notortep · 14.05.2012, 22:18

форма - это тег <form>, внутрь которого могут входить поля ввода <input type="text">

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
var teg_input = document.createElement (('\x' == x) ? '<input name="valuer">' : 'input');
teg_input.name = 'valuer';
 
//вариант 1 - добавит в конец тела документа
  document.body.appendChild (teg_input);
   
   //вариант 2 - добавит в конец первой на странице формы
     document.forms [0].appendChild (teg_input);
 
      //вариант 3 - добавит перед элементом с id="xyz"
        var elem = document.getElementById ('xyz');
        elem.parentNode.insertBefore (teg_input, elem);

@borovik · 14.05.2012, 22:22

JavaScript
1
2
3
4
5
6
<script>
var input=document.createElement('input');
input.type = 'text';
input.name = 'valuer';
document.body.appendChild(input);
</script>​

http://jsfiddle.net/RUQZT/

//блин удалите опоздал

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	14.05.2012, 15:32
	Создать объект (тег) - не проблема. Только надо знать - где именно его создавать: --- нужно либо знать объект (тег), который станет для вновь созданного "родительским" и место вновь созданного объекта в коллекции "детей" этого "родителя" (первый, последний, где-то конкретно посерёдке); --- либо нужно знать объект (тег), вместо которого появится вновь созданный; --- либо нужно знать объект (тег), перед которым появится вновь созданный; --- либо нужно знать объект (тег), после которого появится вновь созданный. Так что вопрос ваш неполон. 0

Опции темы

Создание input type=text

Решение