Что такое веб-форма. Из чего она состоит и для чего нужна. Как и где её можно использовать

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

Веб-форма на сайте – это аналог бумажной формы, анкеты, бланка и опросного листа.

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

Форму можно использовать для того чтобы получать сведения от посетителей сайта. К примеру, с помощью web-формы можно осуществлять сбор персональных данных, сведения о заказах, сведения, которые необходимы для выставления счета, способах доставки и так далее. От посетителей требуется внести различного рода информацию в поле формы.

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

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

Форма может осуществлять свою работу только в том случае, если она поддерживается веб-сервером.

Элементы формы, в которые можно ввести текст, называются полями формы. Поля формы могут уже содержать своё название («Обзор», «Сброс», «Отправить» и т.д.) или позволяют вводить текст.

К примерам наиболее часто используемых html-форм можно отнести:

Поля формы по своей сути являются текстовыми полями, переключателями, кнопками другими элементами. На выбор тех или иных элементов влияет информация, которую необходимо получить от посетителя.

Текстовое поле применяется для того чтобы вводить текстовые строки. Максимальное число символов, которые возможно ввести в это поле, не зависит от его ширины.

Флажки (checkbox) применяются для того, чтобы выбрать дополнительные элементы или услуги. Посетитель может самостоятельно снять флажок или установить его. С помощью флажков можно задавать возможность выбора сразу нескольких элементов. Стоит отметить, что флажки обладают только двумя значениями: «установлено» или же «сброшено».

Что касается переключателей (radio), то их применяют вместо флажков в той ситуации, когда пользователь сайта должен выбрать какое-то одно значение из нескольких предложенных. Один из таких переключателей, как правило, действует по умолчанию. Выбор второго переключателя сбрасывает предыдущее значение.

Текстовая область (textarea) применяется для того чтобы ввести одну или несколько строк текста. Данное поле прокручивается, что дает возможность ввода в него текстов различного объема.

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

Раскрывающийся список (select) используется в том случае, если необходимо представить пользователю список различных вариантов. Функции этих списков схожи с функциями переключателей, однако списки занимают не так много места в формах.

Раскрывающийся список можно настроить таким образом, чтобы допустить выбор одного значения или же нескольких. Очень часто такой список используется как выпадающее меню в навигации интернет-ресурса.

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

Кроме того, в форме может присутствовать рисунок, который можно использовать в качестве кнопки. После того, как посетитель заполнит форму, ему необходимо щелкнуть на этот рисунок, и вся информация из формы отправится скрипту, который занимается обработкой форм (этот скрипт находится на сервере).

При помощи кнопки можно изменить те или иные настройки. При этом возможно использование шрифтов, цветов и таблиц.

С помощью окна группы можно обособить группу элементов или текст от другой информации, которая имеется на странице.

У посетителей сайта может быть возможность отправки каких-либо файлов на сайт. Если в форме имеется поле под названием «передача файлов», пользователь может нажать на кнопку, которая называется «Обзор», выбрать нужный файл и отправить его.

После того, как выбран тип полей, которые добавляются в форму, можно определить их внешний вид и назначение. Название поля и указания по их применению можно ввести в форму. Для каждого поля могут быть заданы свойства. Например, можно задать длину текстового поля, указать переключатель, устанавливаемый по умолчанию, и определить значения в раскрывающемся списке.

Далее необходимо задать правила валидации. Например: можно задать обязательные для заполнения поля формы или указать, что в определенные поля нужно вводить данные только определенного типа (например, только буквы или только цифры; ввод email-адреса; ввод url-адреса и т.д.).Правила валидации обеспечивают правильность заполнения формы посетителем сайта.

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

Если пользователь заполнил веб-форму правильно, без ошибок, то после отправки данных на сервер, пользователю отображается страница успешного заполнения формы либо же происходит переадресация на заранее заданную страницу. Если же пользователь заполняет форму для опроса или голосования, то после успешного заполнения формы ему сразу же отображаются страница с общими результатами голосования.

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

Используя онлайн конструктор веб-форм FormDesigner.ru Вы можете за считанные минуты создать нужную вам веб-форму с любым количеством элементов, начиная от простого текстового поля и заканчиваю полем для загрузки файлов, полем для ввода даты или телефона. Для каждого элемента формы Вы можете настроить основные параметры, а также правила валидации. Кроме этого, использую интуитивно понятный дизайнер форм, Вы без проблем сможете настроить нужный вам внешний вид формы.

Что такое веб-формы | Microsoft Docs

• 02/21/2014
• Чтение занимает 10 мин

В этой статье

ASP.NET Web Forms является частью платформы веб-приложений ASP.NET и входит в состав Visual Studio.ASP.NET Web Forms is a part of the ASP.NET web application framework and is included with Visual Studio. Это одна из четырех моделей программирования, которые можно использовать для создания веб-приложений ASP.NET, а другие — ASP.NET MVC, веб-страницы ASP.NET и ASP.NET одностраничных приложений.It is one of the four programming models you can use to create ASP.NET web applications, the others are ASP.NET MVC, ASP.NET Web Pages, and ASP.NET Single Page Applications.

Веб-формы — это страницы, которые пользователи запрашивают с помощью браузера.Web Forms are pages that your users request using their browser. Эти страницы можно написать с помощью сочетания HTML, клиентского скрипта, серверных элементов управления и серверного кода.These pages can be written using a combination of HTML, client-script, server controls, and server code. Когда пользователи запрашивают страницу, она компилируется и выполняется на сервере платформой, а затем платформа создает разметку HTML, которую браузер может визуализировать.When users request a page, it is compiled and executed on the server by the framework, and then the framework generates the HTML markup that the browser can render. Страница веб-форм ASP.NET предоставляет пользователю сведения в любом браузере или клиентском устройстве.An ASP.NET Web Forms page presents information to the user in any browser or client device.

С помощью Visual Studio можно создавать веб-формы ASP.NET.Using Visual Studio, you can create ASP.NET Web Forms. Интегрированная среда разработки (IDE) Visual Studio позволяет перетаскивать серверные элементы управления для создания макета страницы веб-форм.The Visual Studio Integrated Development Environment (IDE) lets you drag and drop server controls to lay out your Web Forms page. Затем можно легко задать свойства, методы и события для элементов управления на странице или для самой страницы.You can then easily set properties, methods, and events for controls on the page or for the page itself. Эти свойства, методы и события используются для определения поведения веб-страницы, внешнего вида и т. д.These properties, methods, and events are used to define the web page’s behavior, look and feel, and so on. Чтобы написать серверный код для обработки логики страницы, можно использовать язык .NET, например Visual Basic или C#.To write server code to handle the logic for the page, you can use a .NET language like Visual Basic or C#.

Note

Документация по ASP.NET и Visual Studio охватывает несколько версий.ASP.NET and Visual Studio documentation spans several versions. Разделы, в которых выделяются функции предыдущих версий, могут оказаться полезными для текущих задач и сценариев, использующих последние версии.Topics that highlight features from previous versions may be useful for your current tasks and scenarios using the latest versions.

Веб-формы ASP.NET:ASP.NET Web Forms are:

• На основе технологии Microsoft ASP.NET, в которой код, выполняемый на сервере, динамически создает выходные данные веб-страницы в браузере или клиентском устройстве.Based on Microsoft ASP.NET technology, in which code that runs on the server dynamically generates Web page output to the browser or client device.
• Совместимо с любым браузером или мобильным устройством.Compatible with any browser or mobile device. Веб-страница ASP.NET автоматически подготавливает соответствующий браузер HTML для таких функций, как стили, макет и т. д.An ASP.NET Web page automatically renders the correct browser-compliant HTML for features such as styles, layout, and so on.
• Совместимо с любым языком, поддерживаемым общеязыковой средой выполнения .NET, например Microsoft Visual Basic и C#Microsoft Visual.Compatible with any language supported by the .NET common language runtime, such as Microsoft Visual Basic and Microsoft Visual C#.
• На основе платформы Microsoft .NET.Built on the Microsoft .NET Framework. Это обеспечивает все преимущества платформы, включая управляемую среду, безопасность типов и наследование.This provides all the benefits of the framework, including a managed environment, type safety, and inheritance.
• Гибкость, так как на них можно добавлять элементы управления, созданные пользователем и сторонними производителями.Flexible because you can add user-created and third party controls to them.

Предложение веб-форм ASP.NET:ASP.NET Web Forms offer:

• Разделение HTML и другого кода пользовательского интерфейса из логики приложения.Separation of HTML and other UI code from application logic.
• Обширный набор серверных элементов управления для распространенных задач, включая доступ к данным.A rich suite of server controls for common tasks, including data access.
• Мощные возможности привязки данных с помощью мощных средств поддержки.Powerful data binding, with great tool support.
• Поддержка сценариев на стороне клиента, выполняемых в браузере.Support for client-side scripting that executes in the browser.
• Поддержка различных других возможностей, включая маршрутизацию, безопасность, производительность, интернационализации, тестирование, отладку, обработку ошибок и управление состоянием.Support for a variety of other capabilities, including routing, security, performance, internationalization, testing, debugging, error handling and state management.

ASP.NET Web Forms помогает преодолеть трудностиASP.NET Web Forms Helps You Overcome Challenges

Программирование веб-приложений представляет проблемы, которые обычно не возникают при программировании традиционных клиентских приложений.Web application programming presents challenges that do not typically arise when programming traditional client-based applications. Вот некоторые из этих проблем:Among the challenges are:

• Реализация многофункционального веб-интерфейса пользователя — может быть сложно и утомительно проектировать и реализовывать пользовательский интерфейс с помощью основных средств HTML, особенно если страница имеет сложный макет, большой объем динамического содержимого и полнофункциональные пользовательские объекты.Implementing a rich Web user interface — It can be difficult and tedious to design and implement a user interface using basic HTML facilities, especially if the page has a complex layout, a large amount of dynamic content, and full-featured user-interactive objects.
• Разделение клиента и сервера . в веб-приложении Клиент (браузер) и сервер — это разные программы, часто выполняемые на разных компьютерах (и даже в разных операционных системах).Separation of client and server — In a Web application, the client (browser) and server are different programs often running on different computers (and even on different operating systems). Следовательно, две половины приложения совместно используют очень мало информации. они могут обмениваться данными, но обычно обмениваются только мелкими фрагментами простой информации.Consequently, the two halves of the application share very little information; they can communicate, but typically exchange only small chunks of simple information.
• Выполнение без отслеживания состояния . когда веб-сервер получает запрос страницы, он находит страницу, обрабатывает ее, отправляет в браузер, а затем удаляет всю информацию о странице.Stateless execution — When a Web server receives a request for a page, it finds the page, processes it, sends it to the browser, and then discards all page information. Если пользователь снова запрашивает ту же страницу, сервер повторяет всю последовательность, повторно обменяя страницу с нуля.If the user requests the same page again, the server repeats the entire sequence, reprocessing the page from scratch. Другой способ — сервер не имеет памяти для обработанных страниц — страница не имеет состояния.Put another way, a server has no memory of pages that it has processed—page are stateless. Таким образом, если приложению требуется хранить информацию о странице, ее характер может стать проблемой.Therefore, if an application needs to maintain information about a page, its stateless nature can become a problem.
• Неизвестные возможности клиента . во многих случаях веб-приложения доступны многим пользователям, использующим разные браузеры.Unknown client capabilities — In many cases, Web applications are accessible to many users using different browsers. Браузеры имеют различные возможности, что затрудняет создание приложения, которое будет выполняться одинаково хорошо на всех них.Browsers have different capabilities, making it difficult to create an application that will run equally well on all of them.
• Сложности при доступе к данным — чтение и запись в источник данных в традиционных веб-приложениях могут быть сложными и требовательными к ресурсам.Complications with data access — Reading from and writing to a data source in traditional Web applications can be complicated and resource-intensive.
• Сложности с масштабируемостью . во многих случаях веб-приложения, разработанные с помощью существующих методов, не соответствуют целям масштабируемости из-за отсутствия совместимости между различными компонентами приложения.Complications with scalability — In many cases Web applications designed with existing methods fail to meet scalability goals due to the lack of compatibility between the various components of the application. Часто это типичная точка сбоя для приложений с большим циклом роста.This is often a common failure point for applications under a heavy growth cycle.

Решение этих задач для веб-приложений может потребовать значительного времени и усилий.Meeting these challenges for Web applications can require substantial time and effort. ASP.NET Web Forms и ASP.NET Framework позволяют решить эти задачи следующими способами.ASP.NET Web Forms and the ASP.NET framework address these challenges in the following ways:

• Интуитивно понятная и последовательная объектная модель . инфраструктура страницы ASP.NET представляет объектную модель, позволяющую представить свои формы как единое целое, а не как отдельные клиентские и серверные части.Intuitive, consistent object model — The ASP.NET page framework presents an object model that enables you to think of your forms as a unit, not as separate client and server pieces. В этой модели можно программировать страницу более интуитивно понятным способом, чем в традиционных веб-приложениях, включая возможность задавать свойства для элементов страницы и реагировать на события.In this model, you can program the page in a more intuitive way than in traditional Web applications, including the ability to set properties for page elements and respond to events. Кроме того, серверные элементы управления ASP.NET являются абстракцией из физического содержимого HTML-страницы и от прямого взаимодействия между браузером и сервером.In addition, ASP.NET server controls are an abstraction from the physical contents of an HTML page and from the direct interaction between browser and server. Как правило, можно использовать серверные элементы управления так, как вы можете работать с элементами управления в клиентском приложении, и не нужно думать о том, как создать HTML для представления и обработки элементов управления и их содержимого.In general, you can use server controls the way you might work with controls in a client application and not have to think about how to create the HTML to present and process the controls and their contents.
• Модель программирования на основе событий . ASP.NET веб-формы предоставляют веб-приложениям привычную модель создания обработчиков событий для событий, происходящих на клиенте или сервере.Event-driven programming model — ASP.NET Web Forms bring to Web applications the familiar model of writing event handlers for events that occur on either the client or server. Инфраструктура страницы ASP.NET абстрагирует эту модель таким образом, что базовый механизм захвата события на стороне клиента, его передачи на сервер и вызова соответствующего метода является автоматическим и невидимым для вас.The ASP.NET page framework abstracts this model in such a way that the underlying mechanism of capturing an event on the client, transmitting it to the server, and calling the appropriate method is all automatic and invisible to you. Результатом является четкая, легко написанная структура кода, которая поддерживает разработку на основе событий.The result is a clear, easily written code structure that supports event-driven development.
• Интуитивное управление состоянием . платформа ASP.NET Pages автоматически обрабатывает задачу поддержания состояния страницы и ее элементов управления, а также предоставляет явные способы поддержания состояния сведений, относящихся к приложению.Intuitive state management — The ASP.NET page framework automatically handles the task of maintaining the state of your page and its controls, and it provides you with explicit ways to maintain the state of application-specific information. Это выполняется без интенсивного использования ресурсов сервера и может быть реализовано с или без отправки файлов cookie в браузер.This is accomplished without heavy use of server resources and can be implemented with or without sending cookies to the browser.
• Приложения, независимые от браузера . платформа ASP.NET Page позволяет создать всю логику приложения на сервере, устраняя необходимость в явном коде для различий в браузерах.Browser-independent applications — The ASP.NET page framework enables you to create all application logic on the server, eliminating the need to explicitly code for differences in browsers. Тем не менее, он по-прежнему позволяет использовать преимущества функций, характерных для браузера, создавая код на стороне клиента для повышения производительности и более богатого интерфейса клиента.However, it still enables you to take advantage of browser-specific features by writing client-side code to provide improved performance and a richer client experience.
• .NET Framework поддержка среды CLR. платформа страницы ASP.NET построена на .NET Framework, поэтому вся платформа доступна для любого приложения ASP.NET..NET Framework common language runtime support — The ASP.NET page framework is built on the .NET Framework, so the entire framework is available to any ASP.NET application. Приложения могут быть написаны на любом языке, совместимом со средой выполнения.Your applications can be written in any language that is compatible that is with the runtime. Кроме того, доступ к данным упрощается с помощью инфраструктуры доступа к данным, предоставляемой .NET Framework, включая ADO.NET.In addition, data access is simplified using the data access infrastructure provided by the .NET Framework, including ADO.NET.
• .NET Framework масштабируемой производительности сервера . платформа страниц ASP.NET позволяет выполнять масштабирование веб-приложения с одного компьютера с одним процессором на многокомпьютерную веб-ферму без внесения сложных изменений в логику приложения..NET Framework scalable server performance — The ASP.NET page framework enables you to scale your Web application from one computer with a single processor to a multi-computer Web farm cleanly and without complicated changes to the application’s logic.

Возможности веб-форм ASP.NETFeatures of ASP.NET Web Forms

• Серверные элементыуправления — ASP.NET веб-серверные элементы управления — это объекты на веб-страницах ASP.NET, которые выполняются при запросе страницы и отображают разметку в браузере.Server Controls— ASP.NET Web server controls are objects on ASP.NET Web pages that run when the page is requested and that render markup to the browser. Многие серверные веб-элементы управления похожи на привычные элементы HTML, такие как кнопки и текстовые поля.Many Web server controls are similar to familiar HTML elements, such as buttons and text boxes. Другие элементы управления включают в себя сложное поведение, например элементы управления Calendar, и элементы управления, которые можно использовать для подключения к источникам данных и вывода данных.Other controls encompass complex behavior, such as a calendar controls, and controls that you can use to connect to data sources and display data.
• Главные страницы— главные страницы ASP.NET позволяют создать единообразный макет для страниц в приложении.Master Pages— ASP.NET master pages allow you to create a consistent layout for the pages in your application. Одна главная страница определяет внешний вид и стандартное поведение всех страниц (или группы страниц) приложения.A single master page defines the look and feel and standard behavior that you want for all of the pages (or a group of pages) in your application. Далее можно приступить к созданию отдельных страниц контента с содержимым, которое вы хотите отобразить.You can then create individual content pages that contain the content you want to display. Когда пользователи запрашивают страницы содержимого, они объединяются с главной страницей для создания выходных данных, которые объединяют макет главной страницы с содержимым страницы содержимого.When users request the content pages, they merge with the master page to produce output that combines the layout of the master page with the content from the content page.
• Работа с Data-ASP.net предоставляет множество возможностей для хранения, извлечения и отображения данных.Working with Data— ASP.NET provides many options for storing, retrieving, and displaying data. В приложении ASP.NET Web Forms элементы управления с привязкой к данным используются для автоматизации представления или ввода данных в элементах пользовательского интерфейса веб-страницы, таких как таблицы, текстовые поля и раскрывающиеся списки.In an ASP.NET Web Forms application, you use data-bound controls to automate the presentation or input of data in web page UI elements such as tables and text boxes and drop-down lists.
• Членство— ASP.NET Identity сохраняет учетные данные пользователей в базе данных, созданной приложением.Membership— ASP.NET Identity stores your users’ credentials in a database created by the application. Когда пользователи входят в систему, приложение проверяет свои учетные данные, считывая базу данных.When your users log in, the application validates their credentials by reading the database. В папке учетной записи вашего проекта содержатся файлы, реализующие различные компоненты членства: регистрация, вход, изменение пароля и авторизация доступа.Your project’s Account folder contains the files that implement the various parts of membership: registering, logging in, changing a password, and authorizing access. Кроме того, веб-формы ASP.NET поддерживают OAuth и OpenID Connect.Additionally, ASP.NET Web Forms supports OAuth and OpenID. Эти улучшения проверки подлинности позволяют пользователям входить на сайт с использованием существующих учетных данных, таких как Facebook, Twitter, Windows Live и Google.These authentication enhancements allow users to log into your site using existing credentials, from such accounts as Facebook, Twitter, Windows Live, and Google. По умолчанию шаблон создает базу данных членства, используя имя базы данных по умолчанию на экземпляре SQL Server Express LocalDB, сервер базы данных разработки, поставляемый с Visual Studio Express 2013 для Web.By default, the template creates a membership database using a default database name on an instance of SQL Server Express LocalDB, the development database server that comes with Visual Studio Express 2013 for Web.
• Клиентские скрипты и клиентские платформы. Вы можете усовершенствовать серверные функции ASP.NET, включив функции клиентского скрипта на страницах веб-форм ASP.NET.Client Script and Client Frameworks— You can enhance the server-based features of ASP.NET by including client-script functionality in ASP.NET Web Form pages. Клиентский скрипт можно использовать для предоставления пользователям более широкого, более быстрого реагирования пользовательского интерфейса.You can use client script to provide a richer, more responsive user interface to users. Кроме того, клиентский скрипт можно использовать для асинхронных вызовов веб-сервера во время работы страницы в браузере.You can also use client script to make asynchronous calls to the Web server while a page is running in the browser.
• Маршрутизация URL-адресовпозволяет настроить приложение для приема URL-адресов запросов, которые не сопоставляются с физическими файлами.Routing— URL routing allows you to configure an application to accept request URLs that do not map to physical files. URL-адрес запроса — это просто URL-адрес, который пользователь вводит в свой браузер для поиска страницы на веб-сайте.A request URL is simply the URL a user enters into their browser to find a page on your web site. Маршрутизация используется для определения URL-адресов, которые семантически понятны для пользователей и могут помочь в оптимизации механизма поиска (SEO).You use routing to define URLs that are semantically meaningful to users and that can help with search-engine optimization (SEO).
• Управление состоянием. веб-формы ASP.NET содержат несколько параметров, которые позволяют сохранять данные как на странице, так и на уровне приложения.State Management— ASP.NET Web Forms includes several options that help you preserve data on both a per-page basis and an application-wide basis.
• Безопасность. важной частью разработки более безопасного приложения является понимание их угроз.Security— An important part of developing a more secure application is to understand the threats to it. Корпорация Майкрософт разработала способ классификации угроз: подмена, вмешательство, отказ, раскрытие информации, отказ в обслуживании, повышение привилегий (STRIDE).Microsoft has developed a way to categorize threats: Spoofing, Tampering, Repudiation, Information disclosure, Denial of service, Elevation of privilege (STRIDE). В ASP.NET Web Forms можно добавлять точки расширения и параметры конфигурации, позволяющие настраивать различные поведения безопасности в веб-формах ASP.NET.In ASP.NET Web Forms, you can add extensibility points and configuration options that enable you to customize various security behaviors in ASP.NET Web Forms.
• Производительность — производительностьможет быть ключевым фактором для успешного веб-сайта или проекта.Performance— Performance can be a key factor in a successful Web site or project. ASP.NET Web Forms позволяет изменять производительность, связанную с обработкой страниц и серверных элементов управления, управлением состоянием, доступом к данным, конфигурацией и загрузкой приложений, а также эффективными методиками программирования.ASP.NET Web Forms allows you to modify performance related to page and server control processing, state management, data access, application configuration and loading, and efficient coding practices.
• Международная связь— веб-формы ASP.NET позволяют создавать веб-страницы, которые могут получать содержимое и другие данные на основе предпочтительного языкового значения для браузера или на основе явного выбора языка пользователем.Internationalization— ASP.NET Web Forms enables you to create web pages that can obtain content and other data based on the preferred language setting for the browser or based on the user’s explicit choice of language. Содержимое и другие данные называются ресурсами, и такие данные могут храниться в файлах ресурсов или в других источниках.Content and other data is referred to as resources and such data can be stored in resource files or other sources. На странице веб-форм ASP.NET вы настраиваете элементы управления для получения значений их свойств из ресурсов.In an ASP.NET Web Forms page, you configure controls to get their property values from resources. Во время выполнения выражения ресурсов заменяются ресурсами из соответствующего локализованного файла ресурсов.At run time, the resource expressions are replaced by resources from the appropriate localized resource file.
• Отладка и обработка ошибок. ASP.NET включает функции, помогающие диагностировать проблемы, которые могут возникнуть в приложении веб-форм.Debugging and Error Handling— ASP.NET includes features to help you diagnose problems that might arise in your Web Forms application. Отладка и обработка ошибок хорошо поддерживаются в веб-формах ASP.NET, что позволяет эффективно компилировать и выполнять приложения.Debugging and error handling are well supported within ASP.NET Web Forms so that your applications compile and run effectively.
• Развертывание и размещение— Visual Studio, ASP.NET, Azure и IIS предоставляют средства, помогающие в развертывании и размещении приложения веб-форм.Deployment and Hosting— Visual Studio, ASP.NET, Azure, and IIS provide tools that help you with the process of deploying and hosting your Web Forms application.

Выбор времени создания приложения Web FormsDeciding When to Create a Web Forms Application

Необходимо тщательно продумать, следует ли реализовать веб-приложение с помощью модели веб-форм ASP.NET или другой модели, такой как ASP.NET MVC Framework.You must consider carefully whether to implement a Web application by using either the ASP.NET Web Forms model or another model, such as the ASP.NET MVC framework. Платформа MVC не заменяет собой модель веб-форм. Обе модели можно использовать для веб-приложений.The MVC framework does not replace the Web Forms model; you can use either framework for Web applications. Прежде чем приступать к использованию модели веб-форм или платформы MVC для конкретного веб-сайта, следует оценить преимущества каждого подхода.Before you decide to use the Web Forms model or the MVC framework for a specific Web site, weigh the advantages of each approach.

Преимущества веб-приложения на основе веб-формAdvantages of a Web Forms-Based Web Application

Платформа на основе веб-форм имеет следующие преимущества.The Web Forms-based framework offers the following advantages:

• Она поддерживает модель событий, которая сохраняет состояние при передаче через HTTP, что облегчает разработку бизнес веб-приложений.It supports an event model that preserves state over HTTP, which benefits line-of-business Web application development. Приложение на основе веб-форм предоставляет множество событий, поддерживаемых различными серверными элементами управления.The Web Forms-based application provides dozens of events that are supported in hundreds of server controls.
• Она использует шаблон контроллера страницы, добавляющий функции к отдельным страницам.It uses a Page Controller pattern that adds functionality to individual pages. Дополнительные сведения см. в разделе контроллер страницы на веб-сайте MSDN.For more information, see Page Controller on the MSDN Web site.
• Он использует состояние представления или серверные формы, что позволяет упростить управление сведениями о состоянии.It uses view state or server-based forms, which can make managing state information easier.
• Она подходит для небольших коллективов веб-разработчиков, которым необходимо использовать большое количество компонентов для быстрого развертывания приложений.It works well for small teams of Web developers and designers who want to take advantage of the large number of components available for rapid application development.
• Как правило, он менее сложен для разработки приложений, так как компоненты (класс страницы , элементы управления и т. д.) тесно интегрированы и обычно нуждаются в меньшем объеме кода, чем модель MVC.In general, it is less complex for application development, because the components (the Page class, controls, and so on) are tightly integrated and usually require less code than the MVC model.

Преимущества веб-приложения на основе MVCAdvantages of an MVC-Based Web Application

Платформа ASP.NET MVC имеет следующие преимущества.The ASP.NET MVC framework offers the following advantages:

• Она облегчает управление сложными структурами путем разделения приложения на модель, представление и контроллер.It makes it easier to manage complexity by dividing an application into the model, the view, and the controller.
• Она не использует состояние просмотра и серверные формы.It does not use view state or server-based forms. Это делает платформу MVC идеальной для разработчиков, которым необходим полный контроль над поведением приложения.This makes the MVC framework ideal for developers who want full control over the behavior of an application.
• Она использует схему основного контроллера, при которой запросы веб-приложения обрабатываются через один контроллер.It uses a Front Controller pattern that processes Web application requests through a single controller. Это позволяет создавать приложения, поддерживающие расширенную инфраструктуру маршрутизации.This enables you to design an application that supports a rich routing infrastructure. Дополнительные сведения см. в разделе Интерфейсный контроллер на веб-сайте MSDN.For more information, see Front Controller on the MSDN Web site.
• Она обеспечивает расширенную поддержку разработки на основе тестирования.It provides better support for test-driven development (TDD).
• Он хорошо подходит для веб-приложений, которые поддерживаются крупными командами разработчиков и веб-дизайнерами, которым требуется высокий уровень контроля над поведением приложения.It works well for Web applications that are supported by large teams of developers and Web designers who need a high degree of control over the application behavior.

Веб-формы на сайте — виды форм, советы по их улучшению и примеры

Веб-форма является одним из основных элементов взаимодействия между клиентом и владельцем ресурса. С помощью форм пользователи «общаются» с сайтом, совершают целевые действия, авторизуются и регистрируются, ищут нужные товары и прочее. В этой статье мы расскажем об основных типах форм на сайте, дадим несколько советов по их улучшению и приведем примеры из реальных сайтов.

Основные виды форм на сайте

Расскажем о видах форм и их особенностях, которые могут встретится на сайте.

Форма для обратной связи

Встречается почти на всех коммерческих сайтах. Цель данной формы — получить данные клиента для дальнейшего звонка менеджера. Как правило форма открывается после нажатия кнопки вверху сайта:

Иногда такие формы располагают отдельным блоком посередине или в конце контента. Тогда пользователю не приходится возвращаться в начало сайта.

Форма для подписки на рассылку

Еще один способ получить данные клиента и осуществлять продажи через email-маркетинг.

С помощью формы для подписки и рассылки электронных писем вы можете сделать нового посетителя постоянным клиентом, а также обеспечить постоянный трафик на сайт. Форма размещается сбоку, встраивается в контент или размещается в футере после какой-то статьи.

Форма для заказа

Одна из основных форм, которая встречается на сайтах — форма заказа товара. Например, на сайте s7 с помощью формы можно выставить нужные параметры и купить билет на рейс:

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

Форма оформления покупки

Встречается в интернет-магазинах. После перехода в корзину или в личный кабинет открывается форма для оформления заказа и покупки товаров, оплаты, указания способа доставки и прочее:

Хорошим тоном считается разделение формы для новых и старых клиентов. Если пользователь постоянно пользуется продукцией интернет-магазина, поля с доставкой и другими персональными полями заполняются автоматически. Например, в интернет-магазине «Лабиринт» уже знают последний адрес доставки и предлагают использовать его снова:

Для новых клиентов желательно не создавать две формы: регистрации и оформления заказа, а объединить все в одну, с указанием необходимых контактных данных для создания личного кабинета.

Форма авторизации и регистрации

Для входа в личный кабинет или его создания используется две формы: авторизации на сайте и регистрации нового пользователя. Первая достаточно простая и содержит два поля — логин и пароль, подсказку, если пользователь забыл данные, и кнопку для входа:

Форма регистрации требует более тщательной проработки, так как это также получение данных нового клиента и его удержание в дальнейшем. Хорошая практика предлагать возможность пользователям зарегистрироваться через социальные сети — так клиенты значительно сэкономят время.

Форма для заказа консультации

Для тех клиентов, которые хотят «только спросить» маркетологи придумали форму консультации — если у пользователя есть вопросы, они могут написать их в специальную форму и получить ответ по e-mail или телефону.

Иногда такие решения заменяет встроенный онлайн-консультант, который оформлен в виде чата со специалистом:

Несмотря на разнообразие форм, есть общие рекомендации, которые подойдут для каждой из них. Дадим несколько советов для дизайнеров по разработке веб-форм и приведем примеры из реальных сайтов.

Совет 1. Разместите форму в заметном месте

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

Как лучше размещать формы на сайте?

1. Использовать шапку сайта

Хедер — первый элемент, который клиент видит на сайте и обращается к нему в случае перехода на другую страницу, поиска информации. В хедере размещают яркие кнопки для вызова формы. Лучше делать это рядом с контактными данными в правом верхнем углу. Например, на сайте заказа пиццы выделили кнопку «Корзина», после нажатия переход в форму оформления покупки:

2. Главный экран

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

Однако, иногда такие формы игнорируются при первом переходе на сайт, так как клиенты не заказывают товар или услугу, не просмотрев всю страницу целиком.

3. В контенте

Чтобы «поймать» клиента, формы размещают в середине контента:

Клиент видит предложение, читая статью или рассматривая изображения, и с высокой вероятностью оставит заявку, если нашел на странице необходимую информацию.

4. Футер

Завершая страницу, добавляют призыв к действию, чтобы клиент, просмотрев всю информацию, не возвращался наверх для заказа, а сразу отреагировал и заполнил данные. Такой прием нацелен на заинтересованных пользователей, так как они дошли до конца страницы и уже приняли решение о покупке.

Совет 2. Сократите количество полей

Подумайте, действительно ли вам нужна вся информация о клиенте. Чем больше усилий требуется пользователю для заполнения формы, тем выше вероятность, что он бросит это и уйдет с сайта. Идеальный набор полей — e-mail и телефон, иногда уместно спросить имя для дальнейшего звонка менеджера.

Лишние вопросы раздражают клиентов, поэтому, сократив количество полей до минимума вы сэкономите время посетителя и повысите уровень конверсии. А информацию о клиенте можно узнать при дальнейшем сотрудничестве.

Также можно упростить ввод настройками — автоматическим определением города, выпадающими списками, маску ввода по телефонному номеру, подсказками и прочим:

Если ваша форма все же подразумевает большое количество вопросов (например, в форме оформления покупки), лучше разбить ее заполнение на несколько шагов.

Совет 3. Продумайте названия полей

Если пользователю непонятно, какую информацию от него хотят, он не будет заполнять форму и совершать целевое действие. Названия полей должны быть короткими, четкими и понятными для клиента. Также лучше избегать лишних слов в названиях, например, вместо «Введите имя» просто существительное «Имя» и так далее. Исключение — поля, где глагол обязателен для понимания сути запроса, к примеру, «Повторите пароль» или «Забыли пароль?».

В этом пункте уместно вспомнить компанию Expedia, которая понесла убытки в 12 млн долларов из-за единственного поля. Разработчики непонятно сформулировали название поля и клиенты писали адрес банка, а не свой домашний адрес. Поэтому важно правильно обозначать ту информацию, которую вы хотите получить от пользователя.

Также можно улучшить восприятие формы с помощью небольших иконок. Подробнее о том, как иконки влияют на конверсию мы писали в этой статье.

Надписи на кнопках также должны быть конкретными — не «Записаться» а «Записаться на консультацию». Так клиент понимает, какое действие совершает.

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

Названия полей обычно располагаются слева или сверху.

Совет 4. Учитывайте все состояния полей

При заполнении формы пользователь может сделать ошибку или просто запутаться, если форма подразумевает большое количество полей. Важно помогать своему клиенту и обозначать все состояния поля:

• обычное состояние;
• изменение поля при наведении мышью;
• выбранное поле, где стоит курсор;
• правильно заполненное поле;
• поле, где есть ошибка.

Так мы обозначили ошибку пользователя, если он не поставил галочку в форме:

Также важно указывать, какие поля являются обязательными для заполнения. Обычно их обозначают *.

Совет 5. Оформите подтверждение после корректного заполнения формы

Клиент должен понять, принята ли заполненная информация формой. Некоторые просто отмечают все поля галочкой и возвращают пользователей на главную страницу, другие — делают отдельную страницу.

Второй вариант предпочтительнее, так как дает полное понимание, что заказ принят и создает положительное впечатление от взаимодействия. Также в подтверждении можно описать дальнейшие действия: когда товар доставят по адресу, что нужно для оплаты и прочее. После заполнения формы клиента можно перенаправить в другие разделы каталога или предложить похожие товары.

Совет 6. Позаботьтесь о безопасности

Клиенту важно знать, что будет с его данными. Люди не хотят, чтобы их адреса и телефоны попали в базу спамеров, поэтому дайте пользователям уверенность, что их данные под надежной защитой. Например, прикрепите ссылку на Политику конфиденциальности, расскажите, зачем конкретно нужен его адрес и телефон.

Особенно данный пункт важен в формах оплаты. Пользователи беспокоятся о безопасности платежей, поэтому необходимо убедить их в полной защите транзакции.

Совет 7. Добавьте мотивации

Никто не хочет давать данные просто так. Клиент хочет понимать, какие выгоды он получит из сотрудничества с компанией, даже после покупки товара. Поэтому перечислите причины, почему ему выгодно пользоваться вашими услугами. Улучшите форму с помощью открытого предложения. Расскажите клиентам о преимуществах сотрудничества с вами и о том, что вы можете им предложить. Если это форма для рассылки, укажите, как часто будут приходить письма, какую информацию вы хотите ему предложить.

Люди заполняют формы ради результата. Какую еще мотивацию можно добавить для клиента?

1. Что-то материальное

Клиенты любят получать выгоду от сотрудничества — скидку на товар, бонусы на карту и прочее. Также хорошо работают бесплатные подарки — промокоды, полезные файлы или видео после подписки и прочее. Например, компания дарит книгу после заполнения формы:

2. Быстрые результаты

Укажите сроки, в которые клиент получит заказ. «Сделаем и доставим через 3 дня» лучше чем «Сроки и доставка рассчитываются индивидуально». Также работают такие формы как «Перезвоним через 40 секунд». Клиенту станет интересно проверить, так ли это на самом деле.

3. Персонализированное предложение

Люди любят, когда учитывают их индивидуальность и предлагают что-то персонализированное. Например, компания предлагает клиенту покрутить барабан и получить персональный подарок:

Совет 8. Я не робот!

Применение сложной капчи может стоить клиентов. Пользователи раздражаются, когда их просят посчитать автобусы, ввести непонятное слово или решить уравнение. Стэнфордский университет проводил исследование о влиянии капчи на уровень конверсии. Результаты были впечатляющие — продажи выросли почти на 40% после исключения капчи из веб-формы.

Если есть потребность в использовании капчи, наилучший вариант — reCaptcha от Google. Это простая кнопка, которая не требует усилий при заполнении.

Совет 9. Подбирайте цвета

Как уже говорилось, формы следует выделять среди основного контента, так как основная цель ее размещения — привлечение внимания и призыв к действию. Используйте контрастные цвета, яркие привлекательные фото, анимацию. Также можно использовать фотографии людей, так как лица привлекают внимание пользователей (подробнее об этом можно прочитать здесь).

Что касается полей и кнопок, лучше разделять их по цвету на главные и второстепенные. Например, использовать яркий цвет для кнопки «Регистрация» и приглушенные оттенки для «Пропустить».

Также нужно обращать внимание на фон за формой. Как правило, при вызове небольшой формы фон затемняется и не отвлекает пользователя.

Совет 10. Тестирование формы

Этот пункт скорее относится к разработчикам, однако, дизайнеры также должны его учитывать, чтобы не было таких результатов как у Expedia.

Перед запуском необходимо самому протестировать форму в нескольких браузерах. Нет ли лишних вопросов? Корректно ли происходит отправка данных? Как отображаются шрифты? Также отдельным пунктом стоит выделить отображение формы на других устройствах. Пользователь мобильного телефона должен с легкостью заполнять поля, не напрягать глаза, читая вопросы. Например, на нашем сайте мы адаптировали форму под мобильное устройство: сделали кнопку и поля нужного размера, увеличили шрифт и убрали изображение, чтобы не отвлекать внимание и не занимать много места:

Студия дизайна IDBI уделяет большое внимание разработке веб-форм и другим элементам взаимодействия клиентов с интерфейсом. Так как с помощью правильной разработки форм можно увеличить уровень конверсии сайта, мы создаем дизайн на основе правил юзабилити и в то же время вносим необычные решения на страницы, чтобы выделить компанию среди конкурентов. Больше наших работ можно посмотреть здесь.

Урок 5. Веб формы (web-формы) | Веб формы textarea checkbox input type text | Уроки MODx Evo

Как создать свой сайт? Уроки HTML и CSS

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

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

После того, как посетитель заполняет предложенную ему форму (например, комментируя Ваш сайт или оформляя заказ в Вашем Internet-магазине), данные, введенные им в поля формы, отправляются серверной программе для последующей обработки.

1. Создание веб формы

Веб форма организуется с помощью тега <form> и </form>. HTML-документ может содержать в себе несколько форм, однако формы не следует вкладывать друг в друга.

Атрибуты тега <form>:

• action – обязательный атрибут, указывается URL, по которому следует передать введенную в форму информацию;
• method – атрибут, указывающий каким образом (иначе говоря, с помощью какого метода протокола передачи гипертекстов) данные из формы будут переданы обработчику.

Задание 1

Откройте справочник Sprav_HTML.doc и ознакомьтесь с атрибутами тега <form> и правилами их назначения. Законспектируйте материал.

 2. Описание элементов веб формы

Существует три типа элементов формы: <textarea>, <select>, <input>.

2.1. Элемент формы <textarea>…</textarea>

Этот элемент служит для создания многострочного поля ввода (рис. 1).

Рис. 1. Пример использования элемента <textarea>

У элемента <textarea> имеются несколько атрибутов:

• name – обязательный атрибут, определяющий имя, под которым содержимое поля будет передано обработчику;
• rows – атрибут, устанавливающий высоту окна в строках;
• cols – атрибут, устанавливающий ширину окна в символах.

Например: <textarea name=»address» rows=»5″ cols=»30″>. Внешний вид формы, содержащей элемент <textarea>, приведен на рис. 1.

Многострочные поля ввода можно использовать, например, для ввода комментариев посетителя.

Задание 2

1. Реализуйте форму, изображенную на рис. 1.
2. Сохраните файл в папке Lab_5 под именем forms.htm

 2.2. Элемент формы <select>   </select>

Этот элемент служит для организации разворачивающихся меню и полей списка (рис. 2).

>

Рис. 2. Пример раскрывающегося списка

 У элемента <select> имеются следующие атрибуты:

• name – обязательный, определяющий имя переменной, которую генерирует меню;
• multiple –  устанавливает режим выбора нескольких значений из списка;
• size – устанавливает число строк, отображаемых одновременно.

Между тегами <select> и </select> находятся значения, которые может выбирать пользователь. Они перечислены в теге <option>. Тег <option> – одиночный элемент, не требующий закрывающего тега.

Тег <option> определяет элемент меню. У тега <option> имеются следующие атрибуты:

• value – обязательный, устанавливающий значение, которое будет передано обработчику, если выбран этот элемент меню;
• selected – показывает, что данный элемент отображается выбранным.

HTML-код списка выглядит так (рисунок 3):

Рис. 3

 Внешний вид этой формы показан на рис. 2.

Задание 3

1. В файле forms.html реализуйте код, предложенный выше. Выясните, как влияют на вид веб формы атрибуты size и multiple тега <select> и атрибут selected тега <option>.
2. Сохраните файл.

 2.3. Элемент формы <input>

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

У тега <input> имеются следующие атрибуты: name, size, maxlength, value, checked, type.

 Задание 4

Откройте справочник Srav_html.doc и ознакомьтесь с атрибутами тега <input> и правилами их назначения. Законспектируйте материал.

 Типы элементов <input>

Основные типы элементов <input>, определяемые атрибутом type:

• type=«radio« – определяет переключатель.

Рис. 4. Пример использования элементов radio

Используется в тех случаях, когда необходимо выбрать только один из родственных элементов. Это значение атрибута type используется с атрибутами name (обязателен), value (определяет значение, возвращаемое серверу в случае выбора данной кнопки), checked (показывает, что кнопка выбрана по умолчанию). Присвоив одинаковые значения атрибуту name разных переключателей,  их можно объединить в группу. В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка. Пример:

 <input type=»radio» name=»modem» value=»9600″ checked /> 9600 бит/с

<input type=»radio» name=»modem» value=»14400″ /> 14400 бит/с

<input type=»radio» name=»modem» value=»28800″ /> 28800 бит/с

В данном примере определена группа из трех радиокнопок, подписанных, соответственно: 9600 бит/с, 14400 бит/с и 28800 бит/с. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная modem со значением 9600. Если пользователь отметит другую кнопку, обработчику будет передана переменная modem со значением 14400 или 28800.

Задание 5

В файл forms.html добавьте веб форму, запрашивающую сведения о возрасте посетителя. Форма должна выглядеть как на рис. 4.

Примечание: при создании формы наиболее распространенная ошибка, доставляющая неудобство пользователю – неровно расположенные поля. Поэтому для размещения полей формы рекомендуется использовать таблицу. 

• type=»checkbox» – кнопка с независимой фиксацией. Используется в тех случаях, когда одновременно можно выбрать несколько опций. Атрибуты: name (обязателен), value, checked (рис. 5).

Рис. 5. Пример использования элементов checkbox

Если на Ваш сайт зайдет пользователь, желающий купить проект, то, прежде чем оформить его заказ, следует уточнить, какие проекты его интересуют. Причем, возможно, он еще не решил, какой проект ему нужен, и готов рассмотреть несколько вариантов.

Чтобы решить эту задачу, нужно создать форму, использующую элементы checkbox, так как в этом случае, в отличие от использования элементов radio, можно выбрать несколько вариантов.

Задание 6

В файле forms.html создайте веб форму как на рис. 5. 

• type=»submit» – командная кнопка, которая отправляет на сервер все введенные данные. Данные отправляются по адресу, указанному в атрибуте action тега <form>. Надпись на кнопке можно задать путем введения атрибута value=»Надпись», например:

<input type=»submit» value=»Отправить» /> 

• type=»reset» – определяет кнопку, при нажатии на которую форма возвращается в исходное состояние. В этом случае данные обработчику не передаются, поэтому кнопка может и не иметь атрибута name. Надпись на кнопке задается при помощи атрибута value=»Надпись». 

Задание 7

1. В файле forms.html добавьте в конец каждой формы две кнопки: submit и reset с соответствующими надписями. Проверьте действие кнопки reset.
2. По нажатию кнопки submit данные, введенные пользователем, отправляются соответствующей программе для обработки. Имя этой программы и путь к ней указываются в атрибуте action тега <form>. Вы пока не умеете писать такие программы но, чтобы проверить работу кнопки submit, Вы можете в качестве значения атрибута action указать адрес любой Web-страницы или картинки.
3. Сохраните созданную страницу. Результат для одной из веб форм на рис. 6

Рис. 6. Пример использования элементов submit и reset 

• type=»text» – определяет окно для ввода строки текста. Это значение атрибута type можно использовать с атрибутами name (обязателен), value, size и maxlength.

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

Чтобы решить эту задачу, нужно создать форму, позволяющую клиенту вводить контактную информацию о себе. При ее создании используются элементы text.

Задание 8

В файле forms.html создайте веб форму, которая выглядит как на рис. 7. Поля, обязательные для заполнения, отметьте звездочками.

Рис. 7. Пример использования элементов text 

• type=»password» ‑ определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*).
• type=»button» ‑ не выполняет никаких действий при нажатии на кнопку, если к ней не прикреплена программа. Это значение атрибута type используется с атрибутами name (имя кнопки), value (надпись на кнопке), onclick (для указания имени программы, которая будет выполняться при нажатии на эту кнопку). 

Создание ссылки для отправки письма на электронный адрес

Вы можете создать ссылку на сайте таким образом, чтобы пользователь мог отправить письмо на Ваш электронный адрес. Например, при нажатии по ссылке «Написать письмо» (рис. 8), загрузится почтовая программа, и в строке «Кому» уже будет прописан адрес Вашей электронной почты, а в строке «Oт» будет электронный адрес пользователя, к которому подключена почтовая программа (рис. 9).

Рис. 8. Ссылка для отправки письма на электронный адрес

Рис. 9. Загрузка почтовой программы

Структура ссылки для отправки сообщений на электронный адрес выглядит следующим образом

<a href=»mailto:Ваш электронный адрес»>Написать письмо (или другой текст)</a>

Пример:

<a href=»mailto:[email protected]»>Написать создателям сайта</a> 

Контрольное задание

1. Разработать для сайта проектов страницу zakaz.htm с формой, через которую будет осуществляться связь с посетителями сайта через веб форму (рис. 9). В раскрывающемся списке «Выберите категорию проекта» должны быть следующие пункты:

• Проекты таунхаусов и блокированных домов,
• Проекты домов на две семьи,
• Проекты узких домов,
• Проекты бань.

В раскрывающемся списке «Выберите материал» должны быть следующие пункты:

• Проекты кирпичных домов,
• Проекты домов из газобетона и пенобетона,
• Проекты домов из бруса и бревна,
• Проекты каркасных домов.

2. Создайте ссылку «Написать письмо» для отправки сообщений с сайта на Ваш электронный адрес (рис. 10)

3. Включите созданную страницу с веб формой в структуру сайта. Для этого в левом меню создайте пункт «Заказ проекта» и сделайте его гиперссылкой на страницу с формой заказа (рис. 11).

Рис. 10. Web-страница с формой заказа проекта

Рис. 11. Сайт с веб формой заказа проекта

18 лучших бесплатных конструкторов онлайн-форм

В этой статье приведен список лучших бесплатных онлайн конструкторов для создания форм. Онлайн-формы являются одним из наиболее важных инструментов, используемых компаниями и организациями. С их помощью можно получить мнения пользователей и проводить разнообразные опросы.

Мой любимый конструктор онлайн-форм:

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

 <% @ Page Title = "About" Language = "C #" MasterPageFile = "~ / Site.Master" AutoEventWireup = "true" CodeBehind = "About.aspx.cs" Inherits = "WebFormsApp1.About "%>


 
 <%: Title%>. 
 
 
 Страница описания вашего приложения 
 
 Используйте эту область для предоставления дополнительной информации. 
 <%: Text%> 
 

 пространство имен WebFormsApp1
{
публичный частичный класс О себе: Страница
{
общедоступная строка Text;
protected void Page_Load (отправитель объекта, EventArgs e)
{
Text = "Привет, мир!";
}
}
}