Showing posts with label html form tag. Show all posts
Showing posts with label html form tag. Show all posts

Saturday, October 29, 2022

html form tag

                    HTML Tag 

Form Tag


1]File Upload Tag


<input type="file">

A control that lets the user selects a file. Use the accept attribute to define the type of files that the control can select.


File Tag program 

<!DOCTYPE html>

 <html>

<body>

<h1>File upload</h1>

 <p>Show a file-select field which allows a file to be chosen for upload:</p>

 <form action="/action.php">

 Select a file: <input type="file" name="myFile"><br><br>

<input type="submit">

</form>

</body>

 </html>

file Tag Output


File program output


2]Submit  Button

<input type= "submit">

A button that submit the form.<input type ="submit"> defines a button for submitting form data to form-handler. The form-handler is typically a server page with a script for processing input data. the form -handler is specified in the forms action attribute.


Submit Tag program 

 <!DOCTYPE html>

 <html>

 <body>

<h2>Submit Button</h2>

<p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p>

 <form action="/action.asp">

 First name:<br>

 <input type="text" name="firstname" value="Sanjay"><br>

Last name: <br>

 <input type="text" name="lastname" value="jadhv"><br><br>

<input type="submit" value="Submit">

</form>

<p>If you click "Submit", the form-data will be sent to a page called "/action.asp"</p>

</body>

</html>


submit Tag output

Submit program output


3] Reset Tag 

<input type="reset">

A button that resets the contents of  the form to default values.


Reset tag program 

<!DOCTYPE html>

<html>

<body>

<h2>Reset Button</h2>

<p>Reset button that will reset all form values to their default values </p>

 <form action="/action.asp">

 First Name :<input type="text" name="firstname" value="Surya"><br>

 Last name :<input type="text" name="lastname" value="Rad><br><br>

 <input type="submit" value="Submit">

<input type="reset">

</form>

<p>If you change the input values and then click the "Reset" button,<br> the form-data will be reset to the default values.</p>

</html>


Reset tag output


Reset tag output

4] button Tag

<input type="button">

Buttons are created as the final component of any form. A button lets the user trigger son events like submission of data, upload/download or any kind of alert/message.


Button Tag program 

<!DOCTYPE html>

<html>

<body>

<h2>Input Button</h2>

<input type="button" onclick="alert("Hello World!')" value="Click Me!">

 </body>

</html>

Button Tag output 

Button Tag output


5] Checkbox Tag


<input type="checkbox">

A check box allowing multiple values to be selected/de selected.


Checkbox Tag program 

<html>

 <body>

 <h2>Checkboxes</h2>

<p> The<strong>input type="checkbox"</strong>

defines a checkbox</p>

<form action="/action_page.php">

 <input type="checkbox" name="vehicle1" value="sports car">

<P>I have sports car</p><br>

<input type="checkbox" name="vehicle2" value="Luxury Car"> 

<P>I have a Luxury car</p><br><br>

<input type="submit">

</form>

</body>

</html>

Checkbox Tag output 


Checkbox Tag output


Visit This Link

To Your extra information 



HTML meta attribute





Wednesday, October 26, 2022

html form tag

  HTML Tag 



 

 Form Tag

HTML Forms are one of the main parts of communication between a user and a web site or web application. HTML forms serve the purpose of collecting information provided by the users.

       Forms are required to take input from the user who visits the website. This form is used basically for the registration process, logging into your profile on a website or to create your profile on a website, etc … The information that is collected from the form is - Name , password  etc. Now the form will take input from the form and post that data in backend applications. So the backend application will process the data which is received by them. There are various form elements that we can use like text fields, text area, drop-down list, select, checkboxes, radio, etc.


Attributes 


1) Action :-

Form action tells us about the page name where form data has been processed.to send the data that the user will submit.


2) method :-

Method to be used to upload data. The two methods are GET and POST. 


1) Get Method : - It has a limited length of characters of URL. we should not use get to send some sensitive data. This method is better for non-secure data.

2) Post Method : -It has no size limitations. The submission of the form with the method post, can not be bookmarked.


3) Target :-

Specify the target window or frame where the result of the form action will be displayed. It takes values like blank,_self,_parent etc.

 

Form  Tag program 


<!Doctype html>

<html>

<Body>

<form>

<fieldset>

<legend>Log in </legend>

<label>Username: <input type="text"></label><br>

<label>Password: <input type="password"></label><br>

<input type="submit" value="Submit">

</fieldset>

</form>

</Body>

</html>


Form Tag  output 




Form Type

 

1) Input Type 

The HTML <input> element is used to create interactive controls for web-based forms in order to data from the user a wide variety of types of input data and control widgets are available depending on the device and user agent.


1) <input type = "text">

A single line text field. We can use the maxlength and minlength attributes to specify the maximum length and minimum length of the value that can be entered. 


Program 

<html>

<body>

 <form>

First name:<br>

<input type="text" name="firstname">

<br>

  Last name:<br>

<input type="text" name="lastname">

 </form>

</body>

</html>


Input Type output 


2) <input type="password">


A single line text field same as text but only difference is that it's value is hidden. 


Program 


<html>
<body>
<form>
 User name :<br>
<input type="text" name="username"><br>
User password :<br>
<input type="password" name="password">
</form>
</body>
</html>


Input type output
 




Attribute Description 




1) Type :  Indicates the type of input control and for text input control it will be set to text.


2) Name: Used to give a name to the control which is sent to the server to be recognized and get the value.


3)  Value: This can be used to provide an initial value inside the control. 


4) Size: Allows to specify the width of the text-input control in terms of characters. 


5) Maxlength: Allows to specify the maximum number of characters a user can enter into the


6) Placeholder:- It is used to give a hint about what to input. 

7) Readonly : it is used to make a textbox readonly "un-writable"
 

HTML Radio button :

3) <input type = "radio">


A radio button, allowing a single value to be selected out of multiple choices. Or we can say that it is used to restrict user to choose only one option out of many.


Program 


<!DOCTYPE html>

<html>

<body>

 <h2>Radio Buttons</h2>

 <p>The <strong>input type="radio"</strong> defines a radio button:</p>

<form action="/action">

<input type="radio" name="grade" value="First" checked> First<br>

<input type="radio" name="grade" value="Second"> Second<br> 

<input type="radio" name="grade" value="Third"> Third<br>

<input type="radio" name="grade" value="Fail"> Fail<br><br>

<input type="submit">

</form>
</body>
</html>

3) <input type = "radio">  


Output 





      Visit This Link

   To Your extra information