Web Designing 101 Class


#202

Ermm…


#203

Did you link your nav menu items to any web pages?

Please do.

Today, let’s do a quick lesson on HTML forms.


#204

Like now?
I’m not sure I know how.
PS: my network’s kinda slow, please excuse my slow replies.


#205

In the href attribute of your <a> tag, put the age you want to link them to.

I suggest you create an Aboutus.htm for that.


#206

So @Anelaw,

We use the <form> tag to create a form. This is the code for a simple form:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form> 

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

</body>
</html>

Paste this code in a new htm file called contactus.htm @Anelaw.


#207

Okay. I’ll do this after this class. Thanks


#208

Done!


#209

Awesome!

So we use <input> tag to create text fields for our form

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

Above, the type attribute in the tag is set to “text” to let the browser know we are creating a text field. When set to “submit” like below, we let the browser know it is a submit button.

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

The attribute value is the label on the textfield or button.

Does this make sense @Anelaw ?


#210

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.

Normally, the form data is sent to a web page on the server when the user clicks on the submit button.

In the example above, the form data is sent to a page on the server called “/action_page.php”. This page contains a server-side script that handles the form data:

<form action="/action_page.php">

So if I want the browser to redicrect me to another page after the submit button is clicked, I use an action attribute.

If the action attribute is omitted, the action is set to the current page.


#211

The Target Attribute

The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.

The default value is “_self” which means the form will be submitted in the current window.

To make the form result open in a new browser tab, use the value “_blank”:

<form action="/action_page.php" target="_blank">


#212

The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data:

<form action="/action_page.php" method="get">

OR

 <form action="/action_page.php" method="post">

#213

Grouping Form Data with <fieldset>

The <fieldset> element is used to group related data in a form.

The element defines a caption for the <fieldset> element.


#214

EG:

<!DOCTYPE html>
<html>
<body>

<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>

<form action="/action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

</body>
</html>

@Anelaw, paste in contactus.htm then post the result. Thanks.


#215


#216

Good job !

Hope you get the concept now.

So using this method, I want you to add a contact page and a customer request form to your website.

You will have to create 2 htm pages, the first containing a contact form (name, phone number, address), the second is the request form (name, type of request, etc)

Can you figure out how to do a dropdown field in your form ?


#217

Wait o…I’m still trying to assimilate :thinking:


#218

I’m sure you can figure it out. Use Google :smiley:


#219

:joy::joy: I sure will!


#220

Good morning @Funsho.

  1. I have been able to create both the contact and request forms.
    I am finding it difficult to link them to my website.
    I used this code:
    <href="file:///C:/Users/angela/Documents/PhD/Web%20Designing%20101/contactus2.htm>

  2. For my nav bar, do I link each to any random website as practice? Or ??


#221

tag <a> does the linking, the href attribute in tag <a> tells the browser where to link you to.