TryIt Editor v2.0 - Example of HTML Roommate Application Form

Source Code: (back to article)

Result: Report an issue

999

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

›

⌄

<!DOCTYPE html>

<html>

<head>

<title>Roommate Application Form</title>

<style>

html, body {

min-height: 100%;

}

body, div, form, input, textarea, p {

padding: 0;

margin: 0;

outline: none;

font-family: Roboto, Arial, sans-serif;

font-size: 14px;

color: #666;

line-height: 22px;

}

h1 {

position: absolute;

margin: 0;

font-size: 32px;

color: #fff;

z-index: 2;

}

.testbox {

display: flex;

justify-content: center;

align-items: center;

height: inherit;

padding: 20px;

}

form {

width: 100%;

padding: 20px;

border-radius: 6px;

background: #fff;

box-shadow: 0 0 10px 0 #cc0052;

}

.banner {

position: relative;

height: 210px;

background-image: url("/uploads/media/default/0001/01/f1cf9a9068f4bfbdbd9758c45db79203579a3561.jpeg"); background-size: cover;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

}

.banner::after {

content: "";

background-color: rgba(0, 0, 0, 0.4);

position: absolute;

width: 100%;

height: 100%;

}

input, textarea {

margin-bottom: 10px;

border: 1px solid #ccc;

border-radius: 3px;

}

input {

width: calc(100% - 10px);

padding: 5px;

}

textarea {

width: calc(100% - 12px);

padding: 5px;

}

.item:hover p, input:hover::placeholder {

color: #cc0052;

}

.item input:hover, .item textarea:hover {

border: 1px solid transparent;

box-shadow: 0 0 6px 0 #cc0052;

color: #cc0052;

}

.item {

position: relative;

margin: 10px 0;

}

.btn-block {

margin-top: 10px;

text-align: center;

}

button {

width: 150px;

padding: 10px;

border: none;

border-radius: 5px;

background: #cc0052;

font-size: 16px;

color: #fff;

cursor: pointer;

}

button:hover {

background: #ff0066;

}

@media (min-width: 568px) {

.name-item, .contact-item {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

.contact-item .item {

width: calc(50% - 8px);

}

.name-item input {

width: calc(50% - 20px);

}

.contact-item input {

width: calc(100% - 12px);

}

</style>

</head>

<body>

<h1>Roommate Application Form</h1>

</div>

</div>

<p>Email</p>

</div>

<p>Phone</p>

</div>

<p>Student Status</p>

</div>

<p>Roommate Preferences</p>

</div>

<p>Pet Restrictions</p>

</div>

<p>If you are looking for property to share, describe below the neighborhoods you are interested in, the amenities, utilities, etc.</p>

</div>

<p>If you are looking for a roommate to share your property, describe below the property, furnished or unfurnished, and amenities</p>

</div>

<p>Monthly Rent and Utilities</p>

</div>

<p>Please provide any other pertinent information</p>

</div>

<button type="submit" href="/">APPLY</button>

</div>

</form>

</div>

</body>

</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Roommate Application Form</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <style>
      html, body {
      min-height: 100%;
      }
      body, div, form, input, textarea, p { 
      padding: 0;
      margin: 0;
      outline: none;
      font-family: Roboto, Arial, sans-serif;
      font-size: 14px;
      color: #666;
      line-height: 22px;
      }
      h1 {
      position: absolute;
      margin: 0;
      font-size: 32px;
      color: #fff;
      z-index: 2;
      }
      .testbox {
      display: flex;
      justify-content: center;
      align-items: center;
      height: inherit;
      padding: 20px;
      }
      form {
      width: 100%;
      padding: 20px;
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 0 10px 0 #cc0052; 
      }
      .banner {
      position: relative;
      height: 210px;
      background-image: url("/uploads/media/default/0001/01/f1cf9a9068f4bfbdbd9758c45db79203579a3561.jpeg");      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      }
      .banner::after {
      content: "";
      background-color: rgba(0, 0, 0, 0.4); 
      position: absolute;
      width: 100%;
      height: 100%;
      }
      input, textarea {
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      }
      input {
      width: calc(100% - 10px);
      padding: 5px;
      }
      textarea {
      width: calc(100% - 12px);
      padding: 5px;
      }
      .item:hover p, input:hover::placeholder {
      color: #cc0052;
      }
      .item input:hover, .item textarea:hover {
      border: 1px solid transparent;
      box-shadow: 0 0 6px 0 #cc0052;
      color: #cc0052;
      }
      .item {
      position: relative;
      margin: 10px 0;
      }
      .btn-block {
      margin-top: 10px;
      text-align: center;
      }
      button {
      width: 150px;
      padding: 10px;
      border: none;
      border-radius: 5px; 
      background: #cc0052;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
      }
      button:hover {
      background: #ff0066;
      }
      @media (min-width: 568px) {
      .name-item, .contact-item {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      }
      .contact-item .item {
      width: calc(50% - 8px);
      }
      .name-item input {
      width: calc(50% - 20px);
      }
      .contact-item input {
      width: calc(100% - 12px);
      }
      }
    </style>
  </head>
  <body>
    <div class="testbox">
      <form action="/">
        <div class="banner">
          <h1>Roommate Application Form</h1>
        </div>
        <div class="item">
          <p>Name</p>
          <div class="name-item">
            <input type="text" name="name" placeholder="First" />
            <input type="text" name="name" placeholder="Last" />
          </div>
        </div>
        <div class="contact-item">
          <div class="item">
            <p>Email</p>
            <input type="text" name="name"/>
          </div>
          <div class="item">
            <p>Phone</p>
            <input type="text" name="name"/>
          </div>
        </div>
        <div class="item">
          <p>Student Status</p>
          <input type="text" name="name"/>
        </div>
        <div class="item">
          <p>Roommate Preferences</p>
          <textarea rows="3" required></textarea>
        </div>
        <div class="item">
          <p>Pet Restrictions</p>
          <textarea rows="3" required></textarea>
        </div>
        <div class="item">
          <p>If you are looking for property to share, describe below the neighborhoods you are interested in, the amenities, utilities, etc.</p>
          <textarea rows="3" required></textarea>
        </div>
        <div class="item">
          <p>If you are looking for a roommate to share your property, describe below the property, furnished or unfurnished, and amenities</p>
          <textarea rows="3" required></textarea>
        </div>
        <div class="item">
          <p>Monthly Rent and Utilities</p>
          <input type="text" name="name"/>
        </div>
        <div class="item">
          <p>Please provide any other pertinent information</p>
          <textarea rows="3" required></textarea>
        </div>
        <div class="btn-block">
          <button type="submit" href="/">APPLY</button>
        </div>
      </form>
    </div>
  </body>
</html>