, , , , and . Forms add interactivity to websites by allowing users to input and submit information.">, , , , and . Forms add interactivity to websites by allowing users to input and submit information."> Address: [go: up one dir, main page] Include Form Remove Scripts Session Cookies Open navigation menuClose suggestionsSearchSearchenChange LanguageUploadSign inSign inDownload free for days0 ratings0% found this document useful (0 votes)25 views9 pagesHTML Form Lecture NotesHTML forms allow users to enter data into a web page. Forms contain controls like text fields, checkboxes, radio buttons, and submit buttons. Form data is sent to a CGI script for processing when the user clicks submit. Common form tags include <form>, <input>, <textarea>, <select>, and <option>. Forms add interactivity to websites by allowing users to input and submit information.Uploaded byAnne AnziyaAI-enhanced descriptionCopyright© © All Rights ReservedWe take content rights seriously. If you suspect this is your content, claim it here.Available FormatsDownload as PDF, TXT or read online on ScribdDownload nowDownloadSave HTML Form Lecture Notes For LaterDownloadSaveSave HTML Form Lecture Notes For Later0%0% found this document useful, undefined0%, undefinedEmbedSharePrintReport0 ratings0% found this document useful (0 votes)25 views9 pagesHTML Form Lecture NotesHTML forms allow users to enter data into a web page. Forms contain controls like text fields, checkboxes, radio buttons, and submit buttons. Form data is sent to a CGI script for processing when the user clicks submit. Common form tags include <form>, <input>, <textarea>, <select>, and <option>. Forms add interactivity to websites by allowing users to input and submit information.Uploaded byAnne AnziyaAI-enhanced descriptionCopyright© © All Rights ReservedWe take content rights seriously. If you suspect this is your content, claim it here.Available FormatsDownload as PDF, TXT or read online on ScribdDownload nowDownloadSave HTML Form Lecture Notes For LaterCarousel PreviousCarousel NextDownloadSaveSave HTML Form Lecture Notes For Later0%0% found this document useful, undefined0%, undefinedEmbedSharePrintReportDownload nowDownloadYou are on page 1/ 9SearchFullscreenHTML Forms 2023HTML FormsWhat is an HTML form? (i) An HTML form is a section of a HTML page containing normal content and special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.). (ii) A web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.HTML forms are created using the following tags:-©Juliet 2023 Page 1 HTML Forms 2023HTML tagsOpening tag Description Closing tag<form> Used to create an HTML form </form> for user input.<input> Defines an input control. Not required Input tag attributes include:- Type, name, value and size.<textarea> Defines a multi-line text input </textarea> control<label> Defines a label for an input </label> element. Label tag uses “for” attribute.<select> Defines a select list (drop-down </select> list).<option> Defines an option in a select list </option><button> Defines a push button </button>©Juliet 2023 Page 2 HTML Forms 2023An example of an HTML FormA form can contain input elements like text fields, checkboxes, radio-buttons, password fieldsetc. A form can also contain select lists and textarea elements.The <form> tag is used to create an HTML form as illustrated below:-< form>input elements…..< /form>HTML Forms - The Input ElementThe most important form element is the input element. The input element is used to select userinformation. An input element can vary in many ways, depending on the type attribute. An inputelement can be of type text field, checkbox, password, radio button, submit button, and more.©Juliet 2023 Page 3 HTML Forms 2023Examples of HTML form control elements:- 1. Text Fields<input type="text" /> defines a one-line input field that a user can enter text into.Example< form><label for=”First name”>First name:</label>< input type="text" name="firstname" /><br />label for=”Last name”>last name:</label>Last name:< input type="text" name="lastname"size=”10” />< /form>How the HTML code above looks in a browser:First name:Last name:Note:- (i) SIZE attribute determines the size of the textbox in characters. Default = 20 characters (ii) MAXSIZE attribute: determines the maximum number of characters that the field will accept. 2. Password Field<input type="password" /> defines a password field.Example©Juliet 2023 Page 4 HTML Forms 2023< form>Password:< input type="password" name="pwd" />< /form>How the HTML code above looks in a browser:Password:Note: The characters in a password field are masked (shown as asterisks or circles). 3. Radio Buttons<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of alimited number of choices.Example< form>< input type="radio" name="sex" value="male" /> Male<br />< input type="radio" name="sex" value="female" /> Female< /form>How the HTML code above looks in a browser: Male Female 4. Checkboxes<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MOREoptions of a limited number of choices.Example:©Juliet 2023 Page 5 HTML Forms 2023< form>< input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />< input type="checkbox" name="vehicle" value="Car" /> I have a car< /form>How the HTML code above looks in a browser: I have a bike I have a car 5. Submit Button<button type="submit" /> defines a submit button.A submit button is used to send form data to a server. The data is sent to the page specified in theform's action attribute. The file defined in the action attribute usually does something with thereceived input:Example:< form>Username:< input type="text" name="user" />< button type="submit" value="Submit"> Submit</button>< /form>How the HTML code above looks in a browser: SubmitUsername:If you type some characters in the text field above, and click the "Submit" button, the browserwill send your input to a page called "html_form_action.asp". The page will show you thereceived input.©Juliet 2023 Page 6 HTML Forms 2023 6. Drop down menuA dropdown menu is a toggleable menu that allows the user to choose one value from apredefined list.The <select> ElementThe <select> element defines a drop-down list:Example:<select id="cars" name="cars"> <option value="toyota">Toyata</option> <option value="subaru">Subaru</option> <option value="nissan">Nissan</option></select>Note: The <option> element defines an option that can be selected. By default, the first item inthe drop-down list is selected.Visible Values:-Use the size attribute to specify the number of visible values:Example:<select id="cars" name="cars" size=”3”> <option value="toyota">Toyata</option> <option value="subaru">Subaru</option> <option value="nissan">Nissan</option></select> 7. Text areaThe <textarea> tag defines a multi-line text input control. A text area can hold an unlimitednumber of characters, and the text renders in a fixed-width font (usually Courier).©Juliet 2023 Page 7 HTML Forms 2023The size of a text area can be specified by the cols and rows attributes.Example:<form><p>Post your comments below:</p><textarea rows="4" cols="50"></textarea> 9. Reset Button<button type="reset" /> defines a reset button.The Reset button resets the form-data to its initial values.Command syntax:<button type="reset" value="Reset">Reset</button>The attributes of the <FORM> element are: (i) ACTION: is the URL of the CGI (Common Gateway Interface) program that is going to accept the data from the form, process it, and send a response back to the browser. (ii) METHOD: GET (default) or POST specifies which HTTP method will be used to send the form’s contents to the web server. The CGI application should be written to accept the data from either method. (iii)ENCTYPE: determines the mechanism used to encode the form contents. You can leave this attribute as default (unspecified) unless you are creating a file upload field. (iv) NAME: is a form name used by VB or JAVA scripts. (v) TARGET: is the target frame where the response page will show up.©Juliet 2023 Page 8 HTML Forms 2023 Common Gateway Interface (CGI) When the user has finished filling in the form and presses “Submit” the data is sent to the application on the server specified in the ACTION attribute of the form element. The application is commonly referred to as a CGI application/program. It resides and runs on the web server. It is typically but not always stored in a directory called cgi-bin. The application can be written in any language; however, it must be one supported by your webserver’s operating system and webserver software. A very popular language for creating CGI applications is PERL (Practical Extraction Report Language). PERL is an interpreted language with rich text manipulation characteristics. Because it is interpreted its performance compared to a compiled CGI application is slower, thus negatively affecting server performance. It has been ported to most popular operating systems and is currently available for most versions of UNIX, Windows NT, and Windows The actual application is commonly referred to as a script. CGI Scripts CGI Scripts process the form's data, and send a response back to the user. They can be written to calculate numbers as in a sales order. They can format data and put it into a database such as a mailing list or guest book. Depending on the situation, a CGI Script can be written to do almost anything©Juliet 2023 Page 9You might also likeHtmlforms-Lecture 3PDFNo ratings yetHtmlforms-Lecture 365 pagesWT-HTML & XHTML - Forms-04PDFNo ratings yetWT-HTML & XHTML - Forms-0432 pagesWIDT UNIT-IIPDFNo ratings yetWIDT UNIT-II47 pagesHTML Forms and InputPDFNo ratings yetHTML Forms and Input4 pageslecture05_wt_html_formsPDFNo ratings yetlecture05_wt_html_forms52 pagesHTML Forms and Input: Try It Yourself - ExamplesPDFNo ratings yetHTML Forms and Input: Try It Yourself - Examples5 pagesIntro to FormsPDFNo ratings yetIntro to Forms16 pagesLab 02PDFNo ratings yetLab 0216 pagescss notes 3rdPDFNo ratings yetcss notes 3rd24 pagesHTML FORMS, Frame PDFPDFNo ratings yetHTML FORMS, Frame PDF29 pagesHTML Forms: - .PDFNo ratings yetHTML Forms: - .3 pagesIntroduction to HTML FormsPDFNo ratings yetIntroduction to HTML Forms13 pagesForm CreationPDFNo ratings yetForm Creation10 pagesWorking With Forms: The Form ElementPDFNo ratings yetWorking With Forms: The Form Element5 pagesLecture 3.2 HTML - FormsPDFNo ratings yetLecture 3.2 HTML - Forms50 pagesHTML FoamPDFNo ratings yetHTML Foam28 pagesFORMS.PPT (1)PDFNo ratings yetFORMS.PPT (1)34 pagesUnit 4 FormsPDFNo ratings yetUnit 4 Forms37 pagesX Unit II Chapter 9PDFNo ratings yetX Unit II Chapter 913 pagesHTML FormsPDFNo ratings yetHTML Forms7 pagesHTML bookPDFNo ratings yetHTML book84 pagesChapter 3 Form and Event HandlingPDFNo ratings yetChapter 3 Form and Event Handling15 pagesIntroduction to html formsPDFNo ratings yetIntroduction to html forms14 pagesHTML Forms and Frames (2)PDFNo ratings yetHTML Forms and Frames (2)9 pagesHTML Form and PHP HTML Form: ITS332 - LABPDFNo ratings yetHTML Form and PHP HTML Form: ITS332 - LAB6 pagesHTMLForm 3PDFNo ratings yetHTMLForm 332 pagesHTML Chapter 4 FormsPDFNo ratings yetHTML Chapter 4 Forms73 pagesChapter 10 FinalPDFNo ratings yetChapter 10 Final42 pagesHTML Forms With PHPPDFNo ratings yetHTML Forms With PHP19 pagesWeb 4 UtpalPDFNo ratings yetWeb 4 Utpal17 pagesUnit 6PDFNo ratings yetUnit 626 pagesForms: Forms Are Used To Collect Data Inputted by A User. They Can Be Used As AnPDFNo ratings yetForms: Forms Are Used To Collect Data Inputted by A User. They Can Be Used As An7 pagesIntroduction_To_FormsPDFNo ratings yetIntroduction_To_Forms29 pagesHTML FormsPDFNo ratings yetHTML Forms23 pagespdf and assignemnt\6th day formPDFNo ratings yetpdf and assignemnt\6th day form22 pagesLesson 7 NotesPDFNo ratings yetLesson 7 Notes5 pagesForm (HTML)PDFNo ratings yetForm (HTML)5 pages7 Introduction To Forms, The FORM INPUT Tag Text InputPDFNo ratings yet7 Introduction To Forms, The FORM INPUT Tag Text Input15 pagesCh.6a HTML - FormPDFNo ratings yetCh.6a HTML - Form8 pagesClass-5A-HTMLForm Elements-Form AttributesPDFNo ratings yetClass-5A-HTMLForm Elements-Form Attributes15 pagesThehtml Form Tag: The Input Elements Go Here....PDFNo ratings yetThehtml Form Tag: The Input Elements Go Here....20 pagesChapter 4PDFNo ratings yetChapter 434 pagesHTML FormsPDFNo ratings yetHTML Forms16 pagesHTML-FORMSPDFNo ratings yetHTML-FORMS16 pagesHTML FormPDFNo ratings yetHTML Form4 pagesLesson 8 Week 8PDFNo ratings yetLesson 8 Week 819 pagesQ4Lecture 7 Html-FormsPDFNo ratings yetQ4Lecture 7 Html-Forms23 pagesHTML Forms: The ElementPDFNo ratings yetHTML Forms: The Element10 pagesFront End Lecture 7PDFNo ratings yetFront End Lecture 731 pagesforms_htmlPDFNo ratings yetforms_html18 pagesCH 3 Htmlpart IIPDFNo ratings yetCH 3 Htmlpart II50 pagesHTML FormsPDFNo ratings yetHTML Forms23 pagesChapter 4 Creating and Validating FormsPDFNo ratings yetChapter 4 Creating and Validating Forms41 pagesHTML FormsPDFNo ratings yetHTML Forms23 pagesHTML Form SlideplayerPDFNo ratings yetHTML Form Slideplayer35 pagesHtml FormsPDFNo ratings yetHtml Forms43 pagesFormsPDFNo ratings yetForms73 pagesHTML FormsPDFNo ratings yetHTML Forms23 pagesHTML FormsPDFNo ratings yetHTML Forms23 pagesDocumentsBusiness
HTML Form Lecture Notes
AI-enhanced description
HTML Forms
(i) An HTML form is a section of a HTML page containing normal content and special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.). (ii) A web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.
HTML tags
A form can contain input elements like text fields, checkboxes, radio-buttons, password fieldsetc. A form can also contain select lists and textarea elements.
< form>input elements…..< /form>
The most important form element is the input element. The input element is used to select userinformation. An input element can vary in many ways, depending on the type attribute. An inputelement can be of type text field, checkbox, password, radio button, submit button, and more.
1. Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into.
Example
< form><label for=”First name”>First name:</label>< input type="text" name="firstname" /><br />label for=”Last name”>last name:</label>Last name:< input type="text" name="lastname"size=”10” />< /form>
First name:
Last name:
Note:-
(i) SIZE attribute determines the size of the textbox in characters. Default = 20 characters (ii) MAXSIZE attribute: determines the maximum number of characters that the field will accept.
2. Password Field
< form>Password:< input type="password" name="pwd" />< /form>
Password:
Note: The characters in a password field are masked (shown as asterisks or circles).
3. Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of alimited number of choices.
< form>< input type="radio" name="sex" value="male" /> Male<br />< input type="radio" name="sex" value="female" /> Female< /form>
Male
Female
4. Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MOREoptions of a limited number of choices.
Example:
< form>< input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />< input type="checkbox" name="vehicle" value="Car" /> I have a car< /form>
I have a bike
I have a car
5. Submit Button
A submit button is used to send form data to a server. The data is sent to the page specified in theform's action attribute. The file defined in the action attribute usually does something with thereceived input:
< form>Username:< input type="text" name="user" />< button type="submit" value="Submit"> Submit</button>< /form>
SubmitUsername:
If you type some characters in the text field above, and click the "Submit" button, the browserwill send your input to a page called "html_form_action.asp". The page will show you thereceived input.
A dropdown menu is a toggleable menu that allows the user to choose one value from apredefined list.
Note: The <option> element defines an option that can be selected. By default, the first item inthe drop-down list is selected.
Visible Values:-Use the size attribute to specify the number of visible values:
7. Text area
The <textarea> tag defines a multi-line text input control. A text area can hold an unlimitednumber of characters, and the text renders in a fixed-width font (usually Courier).
The size of a text area can be specified by the cols and rows attributes.
<form>
</textarea>
9. Reset Button
Command syntax:
(i) ACTION: is the URL of the CGI (Common Gateway Interface) program that is going to accept the data from the form, process it, and send a response back to the browser. (ii) METHOD: GET (default) or POST specifies which HTTP method will be used to send the form’s contents to the web server. The CGI application should be written to accept the data from either method. (iii)ENCTYPE: determines the mechanism used to encode the form contents. You can leave this attribute as default (unspecified) unless you are creating a file upload field. (iv) NAME: is a form name used by VB or JAVA scripts. (v) TARGET: is the target frame where the response page will show up.
When the user has finished filling in the form and presses “Submit” the data is sent to the application on the server specified in the ACTION attribute of the form element.
The application can be written in any language; however, it must be one supported by your webserver’s operating system and webserver software.
A very popular language for creating CGI applications is PERL (Practical Extraction Report Language).
CGI Scripts
CGI Scripts process the form's data, and send a response back to the user. They can be written to calculate numbers as in a sales order. They can format data and put it into a database such as a mailing list or guest book. Depending on the situation, a CGI Script can be written to do almost anything