Getting following errors buliding registration form using html5 and css.Getting following errors

Viewed 5722

Getting following errors buliding registration form using html5 and css.
Registraion form with input type fields,one dropdown list and button. Getting following errors buliding registration form using html5 and css.
Registraion form with input type fields,one dropdown list and button. Getting following errors buliding registration form using html5 and css.
Registraion form with input type fields,one dropdown list and button.

 <!DOCTYPE html>
    <html>
    <head>
      <link rel="icon" href="favicon.png" type="image/png">
      <title>Destiny</title>
      <link href="mystyle.css" rel="stylesheet" type="text/css">
    </head>
    
     <body>
    
      <h1>Registration Form</h1>
    
     <div id="container">
      <form>
    
       <label for="name"  >Name:</label>
       <input type="text" name="name" id="select" value=""style=" margin-left:120px;float:centre; position:relative;"></br></br>
    
      <label for="date" >Date of Birth:</label>
      <input type="date" name="date"  id="select" value="" style=" margin-left:75px;padding-right:15px;float:centre; position:relative;"></br></br>
    
      <label for="country">Country:</label>
      <input list="browsers" name="country"  style="margin-left:110px;position:absolute;">
      <datalist id="browsers">
        <option value="India"></option>
        <option value="United States"></option>
        <option value="United Kingdom"></option>
        <option value="Austraila"></option>
        <option value="France"></option>
      </datalist></br></br>
    
      <label for="phone">Phone number:</label>
      <input type="tel" name="phone" style="margin-left:65px;"></br></br>
    
      <label for="email">Email:</label>
      <input type="email" name="email" style="margin-left:118px;float:centre;"></br></br>
    
      <label>Website:</label>
      <input type="url" style="margin-left:105px;float:centre;"></br></br>
    
     </form>
    </div>
    
    
    <button type="submit">Submit</button>
    
    </body>
    </html>

CSS file

body {
        /*  background-image: url("https://farm6.staticflickr.com/5695/22447126166_2db1545ed4_b.jpg");*/
     
     background-color: #e0d8cc;
    
    }
    header{
        width: 100%;
        height: 80px;
        background-color: #cc6533;
        display: inline-block;
    }
    
    header a:hover{
        color: orange;
    }
    h1{
        margin: 13px 15px 12px 13px;
    
        color:black
    }
    input{
        border: 1px solid #cc6533;
      border-radius: 4px 0px 0px 4px;
    }
    form{
        margin: 47px 0px 0px 34px;
    }
    #container{
        margin-left: 11px;
        width: 500px;
        height: 300px;
        border-radius: 4px;
        border: 1px solid #cc6533
    }
    button{
        border-radius: 4px;
        border: none;
        padding: 4px 9px 5px 10px;
        margin: 6px 0px 0px 452px;
        background-color: #cc6533;
    }
    select{
        border-radius: 0px 4px 4px 0px;
        border: none;
        background-color: #cc6533;
        padding: 1px;
    }
   

Testclass test_webpage.py

    from bs4 import BeautifulSoup
    import pytest
    import pickle
    import requests
    
    class TestWebpage:
        @pytest.fixture(autouse=True)
        def get_soup(self):
            index_page = requests.get("http://localhost:8000/index.html")
            soup_index = BeautifulSoup(index_page.content, 'html.parser')
            self._index = soup_index
            
        # testing index.html
        def test_indexpage(self):
            assert self._index.find_all('form')
            assert self._index.body.h1.string=='Registration Form'
            site = self._index.find('form')
            assert self._index.find('form')
            site1 = site.find_all('input')
            count = 0
            for input in site1:
                count +=1
            assert count==6
            assert self._index.find('datalist')
            site2=site.find_all('datalist')
            site3=self._index.find_all('option')
            count = 0
            for option in site3:
                count +=1
            assert count==5
            assert self._index.find_all('input', {'type': 'text'})
            assert self._index.find_all('input', {'type': 'date'})
            assert self._index.find_all('input', {'type': 'email'})
            assert self._index.find_all('input', {'type': 'tel'})
            assert self._index.find_all('input', {'type': 'url'})

Getting following error

            def test_indexpage(self):
        
                assert self._index.find_all('form')
        
                assert self._index.body.h1.string=='Registration Form'
        
                site = self._index.find('form')
        
                assert self._index.find('form')
        
                site1 = site.find_all('input')
        
                count = 0
        
                for input in site1:
        
                    count +=1
        
        >       assert count==6
        
        E       assert 1 == 6
        
        test/test_webpage.py:23: AssertionError
        
 






  
    
  
4 Answers
  <h1>Registration Form</h1>

This tag has to be placed inside the tag

 <div id="container">

Registration Form

. . .

The syntax of the break tag in the HTML page is incorrectly used throughout your code.

It should be <br> instead of </br>

<!DOCTYPE html>
<html>
<head>
  <link rel="icon" href="favicon.png" type="image/png">
  <title>Destiny</title>
  <link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
 //write your code here
 
 <h1>Registration Form</h1>
 <div id="container">
  <form>
    <label for="name">Name:  </label>
    <input type="text" name="name">
    <br/><br/>
    <label for="dateofbirth">Date of Birth:  </label>
    <input type="date" name="dateofbirth">
    <br/><br/>
    <label for="country">Country:  </label>
    <input list="browsers" name="country">
    <datalist id="browsers">
       <option value="india">India</option>
      <option value="United States">United States</option>
      <option value="United Kingdom">United Kingdom</option>
      <option value="austraila">Austraila</option>
      <option value="France">France</option>
    </datalist>
    <br/><br/>
    <label for="phonenumber">Phone number: </label>
    <input type="tel" name="phonenumber">
    <br/><br/>
    <label for="email">Email:  </label>
    <input type="email" name="email">
    <br/><br/>
    <label for="website">website:  </label>
    <input type="url" name="website">

  </form>
 </div>

 <button type="submit">Submit</button>

 
</body>
</html>

There is nothing wrong with your HTML page. The compiler is looking for the name of the form, Use this:

    <h1>Registration Form</h1>    
    <form id="registrationForm" name="Registration Form">
    ....
    ....
    </form>
    <input type="submit" form="registrationForm">

Sorry for the late answer, but it worked for me.

Related