SlideShare a Scribd company logo
1 of 14
HTML Forms
БОЯН ИВАНОВ
HTML Forms
 Формите в HTML се използват, когато е нужно да се
съберат данни от посетителите на сайт.
 Например по време на регистрацията на потребителя,
можете да съберете данни като имейл, потребителско
име, парола и т.н.
 Една форма вземи информация от посетителите на
сайта и след това ще я изпраща към бек-енд(back-
end) езика използван в приложението, като CGI, ASP,
PHP и т.н.
2
Пример за уеб форма
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
3
Входовото поле <input>
 За да вмъкнем поле, което да приема някакъв
вид данни се използва полето <input>
 За дефинирането на вида от данни, които
искаме да вкараме чрез входовото ни поле се
използва атрибута “type”, примерно type=“text”
 Освен атрибута “type”, <input> полето може да
приеме и всеки друг вид атрибут, както и по
специфични за него такива.
4
Атрибутите на <input>
 align
 alt
 autocomplete
 autofocus
 checked
 disabled
 form
 formaction
 formenctype
 formmethod
 formnovalidate
 formtarget
 height
 list
 max
 maxlength
 min
 multiple
 name
 placeholder
 required
 size
 src
 step
 type
 value
 width
5
<input type=“submit”>
 За да е възможно изпращането на
формата към даден сървър се използва
<input> поле с атрибут type=“submit”, което
изпраща формата към сървъра за
употреба.
 <input type="submit" value="Submit">
6
Други видове <input>
полета
 reset
 radio
 checkbox
 color
 date
 datetime
 email
 file
 button
 hidden
 month
 number
 range
 search
 tel
 time
 url
 week
7
Атрибутите на формата:
action
 За реализирането на изпращането на формата е
нужно да сме дефинирали къде ще бъде изпратена
нашата форма.
 Това става с атрибутa, action=“link”
 Следователно формата ще се изпрати към
дефинирото от нас местоположение.
 От там нататък бек-енд часта се заема с
използването на въведените от потребителя данни.
8
Атрибутите на формата:
method
 За да дефинираме начина, по който ще се изпрати
една форма се използва атрибута, method=“get”
или method=“post”
 GET е метода по-подразбиране, когато не сме
дефинирали метод. Той се използва когато искаме
данните, които изпращаме да са видими във
връзката (URL).
 POST метода се използа, когато се изпращат
чувствителни или лични данни. Също така POST
метода не показва изпратените данни във
връзката.
9
Групиране на на данните в
формата
 За групирането на данни във формите се използва
<fieldset>
 За прилагането на надпис вътре в даден <fieldset>,
се използва <legend>
10
Drop-down menu
 За създаването на падащо меню в нашата форма
се използва елементът <select> … </select>
 Добавянето на данни в зъздаденото от нас падащо
меню, се постига като вътре в <select> тага се
добавя елементът <option> … </option>
 Всяка стойност от падащото меню трябва да има
дефиниран атрибут value=“text” за да може да се
знае каква стойност ще бъде изпратена през
формата при избор на дадената стойност
11
Текстово поле
 Елементът <textarea> ни позволява създаването на
голямо текстово поле.
 При дефирането имаме опция като атрибути да
дефинираме редове и колони с атрибутите
rows=“num” и col=“num”.
 По този начин имаме по-голяма свобода за
създаване на текстово поле от колкото с <input
type=“text”>.
 <textarea name="message" rows="10" cols="30">
Lorem ipsum dolor sit amet
</textarea>
12
Бутон <button>
 Друг начин за създаването на бутон, освен с <input
type=“submit”> е с елементът <button
type=“button”> Click Me! </button>
 Внимавайте, по този начин, ако искате чрез такъв
бутон да се изпраща форма, трябва да се добави
атрибута type=“submit”!
13
Благодаря Ви за
вниманието.
Въпроси?

More Related Content

Viewers also liked (13)

.NET/C#_6
.NET/C#_6.NET/C#_6
.NET/C#_6
 
.NET/C#_19
.NET/C#_19.NET/C#_19
.NET/C#_19
 
.NET/C#_2
.NET/C#_2.NET/C#_2
.NET/C#_2
 
.NET/C#_20
.NET/C#_20.NET/C#_20
.NET/C#_20
 
.NET/C#_18
.NET/C#_18.NET/C#_18
.NET/C#_18
 
.NET/C#_10
.NET/C#_10.NET/C#_10
.NET/C#_10
 
.NET/C#_11
.NET/C#_11.NET/C#_11
.NET/C#_11
 
.NET/C#_4
.NET/C#_4.NET/C#_4
.NET/C#_4
 
.NET/C#_8
.NET/C#_8.NET/C#_8
.NET/C#_8
 
.NET/C#_13
.NET/C#_13.NET/C#_13
.NET/C#_13
 
.NET/C#_17
.NET/C#_17.NET/C#_17
.NET/C#_17
 
.NET/C#_3
.NET/C#_3.NET/C#_3
.NET/C#_3
 
.NET/C#_5
.NET/C#_5.NET/C#_5
.NET/C#_5
 

More from Boian Ivanov (11)

Introduction to CMS
Introduction to CMSIntroduction to CMS
Introduction to CMS
 
Html search engine optimization
Html search engine optimizationHtml search engine optimization
Html search engine optimization
 
Html transitions & animations
Html transitions & animationsHtml transitions & animations
Html transitions & animations
 
Html transformation
Html transformationHtml transformation
Html transformation
 
HTML Lists & Tables
HTML Lists & TablesHTML Lists & Tables
HTML Lists & Tables
 
4) html & css colors
4) html & css colors4) html & css colors
4) html & css colors
 
6) css background
6) css background6) css background
6) css background
 
5) css box model
5) css box model5) css box model
5) css box model
 
CSS Introduction
CSS IntroductionCSS Introduction
CSS Introduction
 
HTML Introduction (BG)
HTML Introduction (BG)HTML Introduction (BG)
HTML Introduction (BG)
 
HTML Inline Block Elements
HTML Inline Block ElementsHTML Inline Block Elements
HTML Inline Block Elements
 

HTML Forms

  • 2. HTML Forms  Формите в HTML се използват, когато е нужно да се съберат данни от посетителите на сайт.  Например по време на регистрацията на потребителя, можете да съберете данни като имейл, потребителско име, парола и т.н.  Една форма вземи информация от посетителите на сайта и след това ще я изпраща към бек-енд(back- end) езика използван в приложението, като CGI, ASP, PHP и т.н. 2
  • 3. Пример за уеб форма <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form> 3
  • 4. Входовото поле <input>  За да вмъкнем поле, което да приема някакъв вид данни се използва полето <input>  За дефинирането на вида от данни, които искаме да вкараме чрез входовото ни поле се използва атрибута “type”, примерно type=“text”  Освен атрибута “type”, <input> полето може да приеме и всеки друг вид атрибут, както и по специфични за него такива. 4
  • 5. Атрибутите на <input>  align  alt  autocomplete  autofocus  checked  disabled  form  formaction  formenctype  formmethod  formnovalidate  formtarget  height  list  max  maxlength  min  multiple  name  placeholder  required  size  src  step  type  value  width 5
  • 6. <input type=“submit”>  За да е възможно изпращането на формата към даден сървър се използва <input> поле с атрибут type=“submit”, което изпраща формата към сървъра за употреба.  <input type="submit" value="Submit"> 6
  • 7. Други видове <input> полета  reset  radio  checkbox  color  date  datetime  email  file  button  hidden  month  number  range  search  tel  time  url  week 7
  • 8. Атрибутите на формата: action  За реализирането на изпращането на формата е нужно да сме дефинирали къде ще бъде изпратена нашата форма.  Това става с атрибутa, action=“link”  Следователно формата ще се изпрати към дефинирото от нас местоположение.  От там нататък бек-енд часта се заема с използването на въведените от потребителя данни. 8
  • 9. Атрибутите на формата: method  За да дефинираме начина, по който ще се изпрати една форма се използва атрибута, method=“get” или method=“post”  GET е метода по-подразбиране, когато не сме дефинирали метод. Той се използва когато искаме данните, които изпращаме да са видими във връзката (URL).  POST метода се използа, когато се изпращат чувствителни или лични данни. Също така POST метода не показва изпратените данни във връзката. 9
  • 10. Групиране на на данните в формата  За групирането на данни във формите се използва <fieldset>  За прилагането на надпис вътре в даден <fieldset>, се използва <legend> 10
  • 11. Drop-down menu  За създаването на падащо меню в нашата форма се използва елементът <select> … </select>  Добавянето на данни в зъздаденото от нас падащо меню, се постига като вътре в <select> тага се добавя елементът <option> … </option>  Всяка стойност от падащото меню трябва да има дефиниран атрибут value=“text” за да може да се знае каква стойност ще бъде изпратена през формата при избор на дадената стойност 11
  • 12. Текстово поле  Елементът <textarea> ни позволява създаването на голямо текстово поле.  При дефирането имаме опция като атрибути да дефинираме редове и колони с атрибутите rows=“num” и col=“num”.  По този начин имаме по-голяма свобода за създаване на текстово поле от колкото с <input type=“text”>.  <textarea name="message" rows="10" cols="30"> Lorem ipsum dolor sit amet </textarea> 12
  • 13. Бутон <button>  Друг начин за създаването на бутон, освен с <input type=“submit”> е с елементът <button type=“button”> Click Me! </button>  Внимавайте, по този начин, ако искате чрез такъв бутон да се изпраща форма, трябва да се добави атрибута type=“submit”! 13

Editor's Notes

  1. https://www.tutorialspoint.com/html/html_input_tag.htm