Как заполнить поля HTML формы?

Программное заполнение полей html формы

Сегодня хочу показать на просто примере, как заполнить поля html формы с помощью приложения написанного на языке c#

Подготовка

Создадим новый проект типа Windows Forms Application.

Добавим на форму: два текстовых поля (txtName и txtLastName), кнопку и control WebBrowser (wb).

Windows Form

Для работы нам понадобиться тестовая HTML страница, например такого вида:

<html>
<head></head>
<body>
<form name="test" method="post" action="in.php">
<p><b>Имя:</b><br>
<input type="text" name="fname" value="Василий"></p>
<p><b>Фамилия:</b><br>
 <input type="text" name="lname" value="Петров"></p>
<input type="submit" value="Submit">
</form>
</body>
</html>

html форма

Работа с полями HTML формы

1. Для начала нужно загрузить страницу в WebBrowser.

private void button1_Click(object sender, EventArgs e)
{
wb.Navigate(URL адрес);
}

2. Затем нужно дождаться полной загрузки страницы. Для этого подписываемся на событие DocumentCompleted.

private void wb_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
}

Поле ввода, расположенное на странице, представляет собой HTML элемент, состоящий из одиночного тега input. Тип поля, а также некоторые другие параметры элемента, задаются с помощью атрибутов. Например: HTML атрибут value &#8212; хранит значение поля, name &#8212; содержит имя элемента и так далее.

Как получить значение поля input?

1. Находим на странице html элемент, который содержит тег input.

2. С помощью метода GetAttribute получаем значение атрибута value.

private void wb_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
if (wb.Document != null)
{
//получаем содержимое тега Body
HtmlElement body = wb.Document.Body;
//получаем все теги input
HtmlElementCollection inputs;
inputs = body.GetElementsByTagName("input");
if (inputs.Count > 1)
{
//получаем значение атрибута value поля input
txtName.Text = inputs[0].GetAttribute("value");
txtLastName.Text = inputs[1].GetAttribute("value");
}
}
}

результат

форма с полями

Как заполнить поле input?

Если же вам нужно заполнить поле input HTML формы, то тогда вместо метода GetAttribute воспользуйтесь методом SetAttribute, например:

inputs[0].SetAttribute("value", txtName.Text);
inputs[1].SetAttribute("value", txtLastName.Text);

результат

заполненные поля

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

В предыдущем примере заполнение полей HTML формы производилось с помощью заранее заданных значений, но так же заполнить поля можно и динамически.

Например, я хочу, чтобы при вводе данных в текстовое поле (textBox) автоматически изменялось значение соответствующего поля на странице.

1. Создадим переменную inputs типа HtmlElementCollection.

public partial class Form1 : Form
{
HtmlElementCollection inputs;
public Form1()
{
InitializeComponent();
}

2. Загружаем html страницу в элемент управления WebBrowser.

private void button1_Click(object sender, EventArgs e)
{
wb.Navigate(URL);
}

3. Получаем коллекцию всех полей формы.

private void wb_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
if (wb.Document != null)
{
HtmlElement body = wb.Document.Body;
inputs = body.GetElementsByTagName("input");
}
}

4. Подписываемся на событие TextChanged, элемента управления textBox, и в обработчике данного события изменяем содержимое поля.

private void txtName_TextChanged(object sender, EventArgs e)
{
if (inputs != null && inputs.Count > 0)
{
inputs[0].SetAttribute("value", txtName.Text);
}
}

результат

динамические поля

Для отправки данных нужно нажать на кнопку на форме, о том, как это сделать программно, можно прочитать, перейдя по ссылке.

Читайте также:

3 комментария

  1. Во-первых, давайте назначим стили недостоверным полям. В этом примере нам нужно определить стили формы как невалидные, когда та находится в фокусе. Мы добавим красную окантовку, красную тень и созданную в photoshop’е красную иконку для обозначения невалидного поля. Как-то так 🙂

  2. Указатель изменяется на другой значок при его перемещении по полю. Например, в ситуациях, где возможен ввод текста в поле формы, инструмент «Рука»

  3. Веб-формы позволяют посетителям сайта внести в специальные поля ту или иную информацию, а разработчику ее получить в удобном для него виде.

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *