Forms in HTML.pdf

Forms in HTML  HTML Forms An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc. An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email a...

Forms in HTML  HTML Forms An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc. An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc.. Why we need HTML Forms? HTML forms are required if you want to collect some data from of the site visitor. For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address. HTML Tag The tag draws a box around the related elements. LOVELY PROFESSIONAL UNIVERSITY HTML Forms Example design: LOVELY PROFESSIONAL UNIVERSITY 4 Tag Description It defines an HTML form to enter inputs by the used side. It defines an input control. It defines a multi-line input control. It defines a label for an input element. It groups the related element in a form. It defines a caption for a element. It defines a drop-down list. It defines an option in a drop-down list. It defines a clickable button. Input Element The HTML element is fundamental form element. It is used to create form fields, to take input from user. We can apply different input filed to gather different information form user. Enter your name  Radio Buttons The defines a radio button. Radio buttons let a user select ONE of a limited number of choices. Radio Buttons Choose your favorite Web language: HTML CSS JavaScript LOVELY PROFESSIONAL UNIVERSITY 7 Radio Buttons LOVELY PROFESSIONAL UNIVERSITY 8  Checkbox Checkboxes The defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. LOVELY PROFESSIONAL UNIVERSITY 9 Checkbox LOVELY PROFESSIONAL UNIVERSITY 10 PASSWORD FIELD EMAIL FIELD The password is not visible to the user It validates the text for correct email in password field control. address. You must use @ and. in this field. Password: Email:  Submit Button The defines a button for submitting the form data to a form-handler. The form-handler is specified in the form's action attribute. This is how the HTML code above will be displayed in a browser: First name: Doe Last name: John Submit LOVELY PROFESSIONAL UNIVERSITY 12 Text area LOVELY PROFESSIONAL UNIVERSITY 13 HTML Form Attributes: Action Attribute The action attribute or form action in HTML is used to inform the browser what page to call when the submit button is pressed. The form data is mostly sent to a server-side handler, but it can also be sent to the JavaScript on the client. LOVELY PROFESSIONAL UNIVERSITY 14  HTML Form Attributes The Target Attribute The target attribute specifies where to display the response that is received after submitting the form. The target attribute can have one of the following values: Value Description _blank The response is displayed in a new window or tab _self The response is displayed in the current window LOVELY PROFESSIONAL UNIVERSITY 15 The Method Attribute The method attribute specifies the HTTP method to be used when submitting the form data. The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post"). The default HTTP method when submitting form data is GET. LOVELY PROFESSIONAL UNIVERSITY 16 GET Method The GET method is used to request data from a specified resource. Data is appended to the URL as query parameters, which are visible in the URL. The character count is also limited to around 2000. It is suitable for requests that retrieve data, such as search queries or navigating between pages. Use the $_GET superglobal to access data sent via the GET method. Post Method The POST method is used to send data to the server to be processed, typically through a form submission. Data is sent in the request body and is not visible in the URL. It is suitable for requests that modify data on the server or send sensitive information, like login credentials. Use the $_POST superglobal to access data sent via the POST method. Post method