Mina  Babayeva Mina Babayeva - 1 year ago 58
Javascript Question

Where to add the mentioned ones(HTML CSS)?

I have these tasks:

  • The label text needs to have

  • The label text needs to be

  • The labels of the checkbox and the radio needs to have

  • The textarea needs to be

Style rules are added so that the label and input elements become significantly larger when the mouse is moved over them (and return to normal size when the mouse moves away from them). This can be easily achieved by using the hover pseudo-class for all label and input elements e.g.
. For example,
label:hover { font-size:40px }
. Add these in the style section of the web page. I added but it is not working.

The following
instruction needs to be added before
, near the end of the file. It is a link to some JavaScript code. After this is added the face image will be immediately shown in the web page after the user selects a file using the file selector (the first input element). The JavaScript code shows the selected image in an img element with
(which should be shown under the file selector). Therefore, please ensure you use this
for your
. This is not working again

Where do I add it in my code?

<!Doctype html>
<html lang="en">
<meta charset="utf-8" />
<title>Creating Form</title>
label:hover { font-size:40px }
input:hover { font-size:40px }
<form action="http://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php "
method="post" enctype="multipart/form-data">
<h1>Please Enter Your Details for our Dating Website</h1>
<fieldset style="background: lightyellow; border:10px solid yellow;margin-bottom:10px;width: 720px;">
<legend>Your Face</legend>
<label for="image" >Your image:</label> <input type="file" name="file to upload" required><br>
<label for="preview">Image Preview:</label> <img src="image005" width="10px" height="10px" id="preview">
<fieldset style="background: lightyellow;border:10px solid yellow;margin-bottom:10px;width: 720px;">
<legend>Your General Details</legend>
<label for="avatar">Name:</label> <input type="text" name="sth" placeholder="Your full name" required><br>
<label for="avatar" >Gender:</label> <input type="radio" name="Gender" value="Male"required>Male
<input type="radio" name="Gender" value="Female" required>Female<br>
<label for="avatar">Age:</label> <input type="number" required="18"><br>
<label for="avatar">Date of Birth:</label> <input type="date"><br>
<label for="color">Favorite color:</label><input type="color" name="color"><br>
<label for="avatar">Which country:</label>
<select name="cities">
<option value="hk">Hong Kong</option>
<option value="hk">Azerbaijan</option>
<option value="hk">Turkey</option>
<option value="hk">Russia</option><option value="hk">Turkey</option><option value="hk">Japan</option>
<fieldset style="background: lightyellow;border:10px solid yellow;margin-bottom:10px;width: 720px;">
<legend>Your Indicators</legend>
<label for="height">Height:</label>Short<input type="range" min="0" max="100" step="5" value="50" name="height" >Tall<br>

<label for="salary">Salary:</label>Poor<input type="range" min="0" max="100" step="5" value="50" name="height" >Rich
<fieldset style="background: lightyellow;border:10px solid yellow;margin-bottom:10px;width: 720px;">
<legend>Your Contact Information</legend>
<label for="avatar">Email:</label><input type="text" name="email" required> <br>
<label for="avatar">Mobile:</label><input type="tel" name="email"> <br>
<label for="avatar">Address</label><textarea width:360px height:50px name="address"></textarea><br>
<label for="avatar" >Method to contact you:</label><input type="checkbox" name="sth" value="Email">Email
<input type="checkbox" name="sth" value="Email">Whatsapp
<input type="checkbox" name="sth" value="Email">In-app chat

<input type="submit" value="Submit">
<script src="assignment part3.js"></script>

Answer Source

You have:

label:hover { font-size:40px }
input:hover { font-size:40px }

You wanted:

    label:hover { font-size: 40px; }
    input:hover { font-size: 40px; }

You also want to check the console for a "404 not found" error. I am a little suspicious of the path you have to the required javascript file. First off, "assignment part3.js" is document relative, meaning we would expect to find it in the current folder. That might not be unexpected for an assignment, However the space in the file name seems potentially wrong.

You have an element with the expected id:

<img src="image005" width="10px" height="10px" id="preview">

so that part seems good. The default image source of "image005" seems to me to want an extension, did you mean for example "image005.png"?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download