<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form practice</title>
</head>
<body><h1>Register</h1>
<form>
<label for="first name">First Name</label>
<input id="first name" type="text" name="first name" placeholder="John" required>
<label for="last name">Last Name</label>
<input id="last name" type="text" name="last name" placeholder="Smith" required>
<div>
<label for="male">Male</label>
<input id="male" type="radio" name="gender" value="male">
<label for="female">Female</label>
<input id="female" type="radio" name="gender" value="female">
<label for="other">Other</label>
<input id="other" type="radio" name="gender" value="other">
</div>
<div>
<label for="email">Email:</label>
<input type="email" name="email" id="email" required placeholder="your email">
<label for="password">Password:</label>
<input type="password" name="password" id="password" pattern=".{5,10}" title="5 to 8 characters" required>
</div>
<div>
<label>
Birthday:
<select name="month">
<option>Month</option>
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
</select>
<select month="day">
<option>Day</option>
<option>01</option>
<option>02</option>
<option>03</option>
</select>
<select month="year">
<option>Year</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
</select>
</label>
</div>
<div>
<label for="agreed">I agree to the terms and conditions</label>
<input id="agreed" type="checkbox" name="agreed">
</div>
<input type="submit" name="">
</form>
</body>
</html>
The pattern attribute in the input tag for the password is not working, neither is the title attribute. Only the required attribute is working.
I have tried checking in Chrome and Safari.
Is it deprecated?
In what other way can I add a validation for minimum length (aside from using JS)?
I'm not sure what the problem is. I copy-pasted your code and it works fine on my end, unless I'm misinterpreting your question. Can you explain the issue you are having further? I tested it in both Chrome and Firefox:
and the title:
Related
The form should not be able to submit the form unless it is filled out. And an error message should pop up.
My problem is that I can't find out how to do this with HTML, because I am not allowed to use JavaScript in this task.
My code:
<form action="https://folk.ntnu.no/anderobs/webtek/receive_form.php" method="post">
<label for="name">Real Name: </label>
<input type="text" id="name" name="name" value=""> <br>
<label for="gender">Your gender: </label>
<input type="radio" id="gender" name="gender" value="Male">
<label for="gender">Male</label>
<input type="radio" id="gender" name="gender" value="Female">
<label for="gender">Female</label> <br>
<label for="email">E-Mail: </label>
<input type="email" id="email" name="email" value=""> <br>
<label for="birthdate">Birthdate: </label>
<input type="date" id="birthdate" name="birthdate" value=""> <br>
<label for="hero">Hero name: </label>
<input type="text" id="hero" name="hero" value=""> <br>
<label for="spandex">Do you wear spandex? </label>
<input type="radio" id="spandex" name="spandex" value="">
<label for="spandex">True</label>
<input type="radio" id="spandex" name="spandex" value="">
<label for="spandex">False</label> <br>
<label for="strengt">Strengt (between 1 and 10): </label>
<input type="number" id="strengt" name="strengt" min="1" max="10"> <br>
<label for="speed">Speed (between 1 and 10): </label>
<input type="number" id="speed" name="speed" min="1" max="10"> <br>
<label for="intelligence">Intelligence (between 1 and 10): </label>
<input type="number" id="intelligence" name="intelligence" min="1" max="10"> <br>
<label for="income">Income: </label>
<input type="number" id="income" name="income" min="0"> <br>
<label for="wealth">Wealth: </label>
<input type="number" id="wealth" name="wealth" min="0"> <br>
<br>
<input type="submit" value="Submit tax form">
I'm trying to make a simple utility for my FAQ sections on a website. so far I have come up with a simple form that has 5 questions and 5 answers, and I am trying to grab the variables from each text box and insert them into the FAQ schema text, but I just can't figure it out.
This is what I have so far. I have tried using {} and #{} but it just displays them as text. I have written this already in PowerShell with winforms, but I find PowerShell much easier to use.
<!DOCTYPE html>
<html>
<head>
<title>Output Tag</title>
</head>
<body>
<p>FAQ Schema Creator</p>
<form onInput='faq.value="[sc_fs_multi_faq headline-1=\"h4\" question-1=\"q1.value\" answer-1=\"a1.value\" headline-2=\"h4\" question-2=\"a2.value\" answer-2=\"\" headline-3=\"h4\" question-3=\"\" answer-3=\"\" headline-4=\"h4\" question-4=\"\" answer-4=\"\" headline-5=\"h4\" question-5=\"\" answer-5=\"\" \"count=\"5\" html=\"true\" css_class=\"\"]"'>
<label for="fname">Question 1:</label>
<input type="text" id="q1" name="q1">
<label for="lname">Answer 1:</label>
<input type="text" id="a1" name="a1"><br>
<br>
<label for="fname">Question 2:</label>
<input type="text" id="q2" name="q2">
<label for="lname">Answer 2:</label>
<input type="text" id="a2" name="a2"><br>
<br>
<label for="fname">Question 3:</label>
<input type="text" id="q3" name="q3">
<label for="lname">Answer 3:</label>
<input type="text" id="a3" name="a3"><br>
<br>
<label for="fname">Question 4:</label>
<input type="text" id="q4" name="q4">
<label for="lname">Answer 4:</label>
<input type="text" id="a4" name="a4"><br>
<br>
<label for="fname">Question 5:</label>
<input type="text" id="q5" name="q5">
<label for="lname">Answer 5:</label>
<input type="text" id="a5" name="a5"><br><br>
Output is:<br><output name="faq"></output>
</form>
</body>
</html>
Try separating the string from the formvalues by replacing question-1="q1.value" with question-1=""+q1.value+"". Note the extra "+ and +". Like so:
<!DOCTYPE html>
<html>
<head>
<title>Output Tag</title>
</head>
<body>
<p>FAQ Schema Creator</p>
<form onInput='faq.value="[sc_fs_multi_faq headline-1=\"h4\" question-1=\""+q1.value+"\" answer-1=\""+a1.value+"\" headline-2=\"h4\" question-2=\""+a2.value+"\" answer-2=\"\" headline-3=\"h4\" question-3=\"\" answer-3=\"\" headline-4=\"h4\" question-4=\"\" answer-4=\"\" headline-5=\"h4\" question-5=\"\" answer-5=\"\" \"count=\"5\" html=\"true\" css_class=\"\"]"'>
<label for="fname">Question 1:</label>
<input type="text" id="q1" name="q1">
<label for="lname">Answer 1:</label>
<input type="text" id="a1" name="a1"><br>
<br>
<label for="fname">Question 2:</label>
<input type="text" id="q2" name="q2">
<label for="lname">Answer 2:</label>
<input type="text" id="a2" name="a2"><br>
<br>
<label for="fname">Question 3:</label>
<input type="text" id="q3" name="q3">
<label for="lname">Answer 3:</label>
<input type="text" id="a3" name="a3"><br>
<br>
<label for="fname">Question 4:</label>
<input type="text" id="q4" name="q4">
<label for="lname">Answer 4:</label>
<input type="text" id="a4" name="a4"><br>
<br>
<label for="fname">Question 5:</label>
<input type="text" id="q5" name="q5">
<label for="lname">Answer 5:</label>
<input type="text" id="a5" name="a5"><br><br>
Output is:<br><output name="faq"></output>
</form>
</body>
</html>
I am learning HTML and I am having trouble understanding something. I was checking out this website Create Amazing Web Forms.
I copied the following HTML from their site:
<form method="post" id="usrForm">
<fieldset>
<legend>Contact Info</legend>
<!-- // [START autocomplete] -->
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA" placeholder="Full name" required="" autocomplete="name" class="dirty">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-555-555-1212" required="" autocomplete="tel">
<!-- // [END autocomplete] -->
<label for="frmShoeSize">Shoe Size</label>
<input type="number" name="shoe-size" id="frmShoeSize" min="1" max="18" step="0.5">
<!-- // [START datalist] -->
<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
<option value="white">
</option><option value="milk">
</option><option value="dark">
</option></datalist>
<!-- // [END datalist] -->
</fieldset>
<fieldset>
<legend>Shipping</legend>
<!-- // [START labels] -->
<label for="frmAddressS">Address</label>
<input type="text" name="ship-address" required="" id="frmAddressS" placeholder="123 Any Street" autocomplete="shipping street-address">
<!-- // [END labels] -->
<label for="frmCityS">City</label>
<input type="text" name="ship-city" required="" id="frmCityS" placeholder="New York" autocomplete="shipping locality">
<label for="frmStateS">State</label>
<input type="text" name="ship-state" required="" id="frmStateS" placeholder="NY" autocomplete="shipping region">
<label for="frmZipS">Zip</label>
<input type="text" name="ship-zip" required="" id="frmZipS" placeholder="10011" autocomplete="shipping postal-code">
<label for="frmCountryS">Country</label>
<input type="text" name="ship-country" required="" id="frmCountryS" placeholder="USA" autocomplete="shipping country">
<label>
<input type="checkbox" name="billAndShip" id="cbBillAndShip">
Bill to this address.
</label>
</fieldset>
<fieldset>
<legend>Billing</legend>
<label for="frmAddressB">Address</label>
<input type="text" name="bill-address" id="frmAddressB" required="" placeholder="123 Any Street" autocomplete="billing street-address">
<label for="frmCityB">City</label>
<input type="text" name="bill-city" id="frmCityB" required="" placeholder="New York" autocomplete="billing locality">
<label for="frmStateB">State</label>
<input type="text" name="bill-state" id="frmStateB" required="" placeholder="NY" autocomplete="billing region">
<label for="frmZipB">Zip</label>
<input type="text" name="bill-zip" id="frmZipB" required="" placeholder="10011" autocomplete="billing postal-code">
<label for="frmCountryB">Country</label>
<input type="text" name="bill-country" id="frmCountryB" required="" placeholder="USA" autocomplete="billing country">
</fieldset>
<fieldset>
<legend>Payment</legend>
<p>Do <b>NOT</b> provide real credit card information in this field.</p>
<label for="frmNameCC">Name on card</label>
<input type="text" name="ccname" id="frmNameCC" required="" placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input type="text" name="cardnumber" id="frmCCNum" required="" autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input type="text" name="cvc" id="frmCCCVC" required="" autocomplete="cc-csc">
<label for="frmCCExp">Expiry</label>
<!-- // [START placeholder] -->
<input type="text" name="cc-exp" id="frmCCExp" required="" placeholder="MM-YYYY" autocomplete="cc-exp">
<!-- // [END placeholder] -->
</fieldset>
<div>
<button class="btn" id="butCheckout">Check Out</button>
</div>
</form>
Here is my entire web page for reference.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="David Warwick">
<meta name="description" content="User Profile">
<meta name="keywords" content="profile">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="CSS/page-format.css">
<link rel="stylesheet" type="text/css" href="CSS/header-navigation.css">
<link rel="stylesheet" type="text/css" href="CSS/advertisement.css">
<script src="scripts/Jscripts.js"></script>
<title>User Profile</title>
</head>
<body>
<div id="container">
<div id="header">
<header>
<h1>User Profile</h1>
<nav>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="index.html">Home</a>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="WarwickDavidAssignment6.html">C# Classes</a>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="about-me.html">About Me</a>
<a class="navbutton" onmouseover="mouseover(this)" onmouseout="mouseout(this)"
href="userprofile.html">User Profile</a>
</nav>
</header>
</div>
<form method="post" id="usrForm">
<fieldset>
<legend>Contact Info</legend>
<!-- // [START autocomplete] -->
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA" placeholder="Full name" required="" autocomplete="name" class="dirty">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC" placeholder="name#example.com" required="" autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-555-555-1212" required="" autocomplete="tel">
<!-- // [END autocomplete] -->
<label for="frmShoeSize">Shoe Size</label>
<input type="number" name="shoe-size" id="frmShoeSize" min="1" max="18" step="0.5">
<!-- // [START datalist] -->
<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
<option value="white">
</option><option value="milk">
</option><option value="dark">
</option></datalist>
<!-- // [END datalist] -->
</fieldset>
<fieldset>
<legend>Shipping</legend>
<!-- // [START labels] -->
<label for="frmAddressS">Address</label>
<input type="text" name="ship-address" required="" id="frmAddressS" placeholder="123 Any Street" autocomplete="shipping street-address">
<!-- // [END labels] -->
<label for="frmCityS">City</label>
<input type="text" name="ship-city" required="" id="frmCityS" placeholder="New York" autocomplete="shipping locality">
<label for="frmStateS">State</label>
<input type="text" name="ship-state" required="" id="frmStateS" placeholder="NY" autocomplete="shipping region">
<label for="frmZipS">Zip</label>
<input type="text" name="ship-zip" required="" id="frmZipS" placeholder="10011" autocomplete="shipping postal-code">
<label for="frmCountryS">Country</label>
<input type="text" name="ship-country" required="" id="frmCountryS" placeholder="USA" autocomplete="shipping country">
<label>
<input type="checkbox" name="billAndShip" id="cbBillAndShip">
Bill to this address.
</label>
</fieldset>
<fieldset>
<legend>Billing</legend>
<label for="frmAddressB">Address</label>
<input type="text" name="bill-address" id="frmAddressB" required="" placeholder="123 Any Street" autocomplete="billing street-address">
<label for="frmCityB">City</label>
<input type="text" name="bill-city" id="frmCityB" required="" placeholder="New York" autocomplete="billing locality">
<label for="frmStateB">State</label>
<input type="text" name="bill-state" id="frmStateB" required="" placeholder="NY" autocomplete="billing region">
<label for="frmZipB">Zip</label>
<input type="text" name="bill-zip" id="frmZipB" required="" placeholder="10011" autocomplete="billing postal-code">
<label for="frmCountryB">Country</label>
<input type="text" name="bill-country" id="frmCountryB" required="" placeholder="USA" autocomplete="billing country">
</fieldset>
<fieldset>
<legend>Payment</legend>
<p>Do <b>NOT</b> provide real credit card information in this field.</p>
<label for="frmNameCC">Name on card</label>
<input type="text" name="ccname" id="frmNameCC" required="" placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input type="text" name="cardnumber" id="frmCCNum" required="" autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input type="text" name="cvc" id="frmCCCVC" required="" autocomplete="cc-csc">
<label for="frmCCExp">Expiry</label>
<!-- // [START placeholder] -->
<input type="text" name="cc-exp" id="frmCCExp" required="" placeholder="MM-YYYY" autocomplete="cc-exp">
<!-- // [END placeholder] -->
</fieldset>
<div>
<button class="btn" id="butCheckout">Check Out</button>
</div>
</form>
<div id="body">
<main>
<form>
<label for="frmNameA">Name
<input type="text" name="name" id="frmNameA" required
autocomplete="given-name">
</label>
</form>
</main>
<aside>
<img id="Advertisement" src="Images/ad.png" alt="Advertise with us" draggable="true"
ondragstart="drag(event)" />
</aside>
<div id="DropZone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
</div>
<footer id="footer">
<p>© 2019 David Warwick</p>
</footer>
</body>
</html>
On their website when I use Google Chrome logged in with my Google Account, all of the form fields populate with my name, address, phone number, email, etc. But when I paste this HTML into my HTML file in Visual Studio Code and view my web page from Google Chrome, it doesn't populate with my information. The only field that works is phone and email. And if I enter my phone or email, none of the other fields populate.
Why is this happening and what am I missing?
I think I may have found the answer here: Google Chrome Help - Fill Out Forms Automatically
According to that page, one of the reasons that form data may not be suggested by Chrome is that the site is not secure enough. Well, I am viewing a local html file from my C drive and my "site" is not secure at all. The following is a quote from the Google Chrome Help site mentioned above.
Chrome doesn't suggest my saved info
If you don't get suggestions when you fill out a form, either:
The website might not be secure enough to get this info from Chrome.
If the website is secure, learn how to fix issues with saved info.
Chrome might not detect certain fields in the form.
Hopefully that is what is going on.
HTML registration form is created with gender option and now CSS failed to format radio buttons in table cells. How to put them in a aesthetic format with the help of external stylesheet?
I have tried MDN's guideline to create form and format them using external CSS. MDN suggested with table and table-cell format in the CSS file!
form.form-example {
display: table;
}
div.form-example {
display: table-row;
}
label,
input,
select,
option {
display: table-cell;
margin-bottom: 10px;
}
<form id="registration" action="" , method="post" class="form-example">
<div class="form-example">
<h1>Registration Form</h1>
</div>
<div class="form-example">
<label for="fname">First Name:</label>
<input name="first_name" type="text" id="fname" placeholder="Python" required>
</div>
<div class="form-example">
<label for="lname">Last Name:</label>
<input name="last_name" type="text" id="lname" placeholder="Buddha" required>
</div>
<div class="form-example">
<label for="bdate">Date of Birth:</label>
<input name="dob" type="date" id="bdate">
</div>
<div class="form-example">
<label for="country">Country:</label>
<select name="country" id="country">
<option>USA</option>
<option>Canada</option>
<option>Mexico</option>
</select>
</div>
<div class="form-example">
<label for="email">Email:</label>
<input type="email" id="email" required>
</div>
<div class="form-example">
<label for="password">Password:</label>
<input type="password" id="password" required>
</div>
<div class="form-example">
<label>Gender:</label>
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female">
<label for="other">Other</label>
<input type="radio" id="other" name="gender" value="other">
</div>
<div class="form-example">
<button>Submit</button>
</div>
</form>
</div>
I would suggest to change your css styles a bit. Because this:
label,input,select,option{
display: table-cell;
margin-bottom: 10px;
}
Will make all inputs on the page to be displayed as a table cell and thus there will be the spacing between radio inputs that you don't like.
I'm sure that there are other options, but what worked for me was removing your label,input,select,option line and adding .table-cell class so you can use it freely on any element that should be displayed as a table-cell.
form.form-example{
display: table;
}
div.form-example{
display: table-row;
height: 30px;
}
.table-cell {
display: table-cell;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Kuldeep Gadhavi">
<title>Registration Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id ="registration" action="", method="post" class="form-example">
<div class="form-example">
<h1>Registration Form</h1>
</div>
<div class="form-example">
<label for="fname" class="table-cell">First Name:</label>
<input name="first_name" type="text" id="fname" placeholder="Python" required class="table-cell">
</div>
<div class="form-example">
<label for="lname" class="table-cell">Last Name:</label>
<input name="last_name" type="text" id="lname" placeholder="Buddha" required class="table-cell">
</div>
<div class="form-example">
<label for="bdate" class="table-cell">Date of Birth:</label>
<input name="dob" clsss="table-cell" type="date" id="bdate">
</div>
<div class="form-example">
<label for="country" class="table-cell">Country:</label>
<select name="country" class="table-cell" id="country">
<option>USA</option>
<option>Canada</option>
<option>Mexico</option>
</select>
</div>
<div class="form-example">
<label for="email" class="table-cell">Email:</label>
<input type="email" id="email" required class="table-cell">
</div>
<div class="form-example">
<label for="password" class="table-cell">Password:</label>
<input type="password" id="password" class="table-cell" required>
</div>
<div class="form-example">
<label class="table-cell">Gender:</label>
<div class="table-cell">
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" required>
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female">
<label for="other">Other</label>
<input type="radio" id="other" name="gender" value="other">
</div>
</div>
<div class="form-example table-cell" >
<button>Submit</button>
</div>
</form>
</div>
</body>
</html>
The group with radio buttons is inside a div with class .table-cell therefore only this div will be rendered as a table cell. The radio inputs inside will remain rendered as inline elements and thus there will be no white-space between them. Also don't forget to add .table-cell class to other elements that should be rendered as table cells (so the inputs and labels.. I have also slightly modified the height of the .form-example, because I have removed the margin on .table-cell class.
label,input,select,option{
display: table-cell;
margin-bottom: 10px;
}
This makes every label, input, select and options as cell.
that's why your radio buttons aren't displayed correctly.
you can see that the male, female and other labels are displayed as cell (border property)
removing label tag should fix the problem.
Male
<input type="radio" id="male" name="gender" value="male" checked>
Female
<input type="radio" id="female" name="gender" value="female">
Other
<input type="radio" id="other" name="gender" value="other">
By the way, consider using grid or flex for such things.
I am newcomer in html code so that i have no huge knowledge about html coding.
When I use inline style, it seems to be working fine but the css code inside the head element doesn't show in the web page. The code seems fine to me. I've tried running this code in both Chrome and Firefox, but the problem persists in both of them. Please check my code & give me any advice or solution. Thanks.
fieldset: {
background: lightyellow;
border: 10px solid yellow;
margin-bottom: 10px;
width: 720px;
}
label: {
width: 180px;
}
<h1>Please Enter Your Details For Our Dating Website!</h1>
<form action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php" method="post">
<fieldset>
<legend>Your Face</legend>
<label for="image">Your image:</label>
<input type="file" name="image" required>
<br>
Image preview:
<img src="" id="preview">
</fieldset>
<fieldset>
<legend>Your General Details</legend>
<label for="name">Name:</label>
<input type="text" name="name" required>
<br>
<label for="gender">Gender:</label>
<input type="radio" name="gender" required>
Male
<input type="radio" name="gender" required>
Female
<br>
<label for="age">Age:</label>
<input type="number" name="age" required>
<br>
<label for="dob">Date of birth:</label>
<input type="date" name="dob">
<br>
<label for="color">Favorite color:</label>
<input type="color" name="color">
<br>
<label for="country">Which country:</label>
<select name="country">
<option value="no"></option>
<option value="en">England</option>
<option value="in">India</option>
<option value="jp">Japan</option>
<option value="sp">Spain</option>
<option value="us">USA</option>
</select>
</fieldset>
<fieldset>
<legend>Your Indicators</legend>
<label for="height">Height:</label>
Short
<input type="range" name="height" min="0" max="100">
Tall
<br>
<label for="salary">Salary:</label>
Poor
<input type="range" name="salary" min="0" max="100">
Rich
<br>
</fieldset>
<fieldset>
<legend>Your Contact Information</legend>
<label for="email">Email:</label>
<input type="email" name="email" required>
<br>
<label for="mobile">Mobile:</label>
<input type="tel" name="mobile">
<br>
<label for="address">Address:</label>
<textarea name="address"></textarea>
<br>
<label for="contact">Method to contact you:</label>
<input type="checkbox" name="contact">
Email
<input type="checkbox" name="contact">
Whatsapp
<input type="checkbox" name="contact">
In-app chat
</fieldset>
<input type="submit" name="Submit">
</form>
Remove this "colon :" from styles properties.
fieldset : {
Then others will work fine.
<!DOCTYPE html>
<html>
<head>
<title>Dating Web Site</title>
<style>
fieldset {
background: lightyellow;
border: 10px solid yellow;
margin-bottom: 10px;
width: 720px;
}
label {
width: 180px;
}
</style>
</head>
<body>
<h1>Please Enter Your Details For Our Dating Website!</h1>
<form action="https://ihome.ust.hk/~rossiter/cgi-bin/show_everything.php" method="post">
<fieldset>
<legend>Your Face</legend>
<label for="image">Your image:</label>
<input type="file" name="image" required>
<br>
Image preview:
<img src="" id="preview">
</fieldset>
<fieldset>
<legend>Your General Details</legend>
<label for="name">Name:</label>
<input type="text" name="name" required>
<br>
<label for="gender">Gender:</label>
<input type="radio" name="gender" required>
Male
<input type="radio" name="gender" required>
Female
<br>
<label for="age">Age:</label>
<input type="number" name="age" required>
<br>
<label for="dob">Date of birth:</label>
<input type="date" name="dob">
<br>
<label for="color">Favorite color:</label>
<input type="color" name="color">
<br>
<label for="country">Which country:</label>
<select name="country">
<option value="no"></option>
<option value="en">England</option>
<option value="in">India</option>
<option value="jp">Japan</option>
<option value="sp">Spain</option>
<option value="us">USA</option>
</select>
</fieldset>
<fieldset>
<legend>Your Indicators</legend>
<label for="height">Height:</label>
Short
<input type="range" name="height" min="0" max="100">
Tall
<br>
<label for="salary">Salary:</label>
Poor
<input type="range" name="salary" min="0" max="100">
Rich
<br>
</fieldset>
<fieldset>
<legend>Your Contact Information</legend>
<label for="email">Email:</label>
<input type="email" name="email" required>
<br>
<label for="mobile">Mobile:</label>
<input type="tel" name="mobile">
<br>
<label for="address">Address:</label>
<textarea name="address"></textarea>
<br>
<label for="contact">Method to contact you:</label>
<input type="checkbox" name="contact">
Email
<input type="checkbox" name="contact">
Whatsapp
<input type="checkbox" name="contact">
In-app chat
</fieldset>
<input type="submit" name="Submit">
</form>
</body>
</html>