Skip to content

Instantly share code, notes, and snippets.

@jdickey

jdickey/HTML forms are fxxxing UGLY.html

Created October 22, 2015 04:36
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jdickey/fb14e585aea187fef84e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jdickey/fb14e585aea187fef84e to your computer and use it in GitHub Desktop.
Download ZIP
Why nobody in his/her/its right mind willingly hand-crafts HTML anymore. And this is a *mild* example.
Raw
HTML forms are fxxxing UGLY.html
<!DOCTYPE html>
<html>
<head>
<title>
New POC
</title>
<meta http-equiv='Content-Type', content='text/html; charset=utf-8'>
<meta name='viewport', content='width=device-width; initial-scale=1.0'>
<link rel="stylesheet" media="all" href="/assets/greeter.self.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/markdown-toolbar.self.css?body=1" />
<link rel="stylesheet" media="all" href="/assets/application.self.css?body=1" />
<link rel="stylesheet" media="screen" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cosmo/bootstrap.min.css" />
<script src="/assets/jquery.self.js?body=1">
</script>
<script src="/assets/jquery_ujs.self.js?body=1">
</script>
<script src="/assets/bootstrap/bootstrap.self.js?body=1">
</script>
<script src="/assets/bootstrap.self.js?body=1">
</script>
<script src="/assets/jquery-fieldselection.self.js?body=1">
</script>
<script src="/assets/markdown-toolbar-core.self.js?body=1">
</script>
<script src="/assets/markdown-toolbar-buttons.self.js?body=1">
</script>
<script src="/assets/markdown-toolbar.self.js?body=1">
</script>
<script src="/assets/users.self.js?body=1">
</script>
<script src="/assets/application.self.js?body=1">
</script>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="59rPV4PMmiaZ6FA3ilDtG1AL92BPLF+VFjJM2Em89ircsTnlPl3UiusTKes6BywTAFGbVn6vGCdrZ26OtVC5QA==" />
</head>
<body>
<div class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
&nbsp;
</span>
<span class="icon-bar">
&nbsp;
</span>
<span class="icon-bar">
&nbsp;
</span>
</button>
<a class="navbar-brand" href="#">
New POC
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/users">
All members
</a>
</li>
<li style="min-width: 3rem;">
</li>
<li>
<a href="/users/new">
Sign up
</a>
</li>
<li>
<a href="/sessions/new">
Log in
</a>
</li>
</ul>
<div class="greeter navbar-text navbar-right">
Hello, Guest User!
</div>
</div>
</div>
</div>
<div class="container-fluid app-container">
<div class="row">
<div class="col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/users">
All members
</a>
</li>
<li>
</li>
<li>
<a href="/users/new">
Sign up
</a>
</li>
<li>
<a href="/sessions/new">
Log in
</a>
</li>
</ul>
</div>
<div class="col-md-10 main">
<form class="new_user_data" id="new_user_data" action="/users" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="&#x2713;" />
<input type="hidden" name="authenticity_token" value="Pps3rIe6XIj1kw/TAAy7qwoP12hoD/KotgTIbRRzR54F8MEeOisSJIdodg+wW3qjWlW7XlmMtRrLUeo76J8I9A==" />
<legend>
Sign Up
</legend>
<div class="control-group">
<label class="control-label" for="user_data_name">
Name
</label>
<div class="controls">
<input type="text" name="user_data[name]" id="user_data_name" />
</div>
<div id="">
</div>
<label class="control-label" for="user_data_email">
Email
</label>
<div class="controls">
<input type="email" name="user_data[email]" id="user_data_email" />
</div>
<div id="">
</div>
<label class="control-label" for="user_data_password">
Password
</label>
<div class="controls">
<input type="password" name="user_data[password]" id="user_data_password" />
</div>
<div id="">
</div>
<label class="control-label" for="user_data_password_confirmation">
Password confirmation
</label>
<div class="controls">
<input type="password" name="user_data[password_confirmation]" id="user_data_password_confirmation" />
</div>
<div id="">
</div>
<label class="control-label" for="user_data_profile">
Profile Summary (Optional)
</label>
<div class="controls">
<textarea cols="80" rows="10" class="markdown-toolbar" name="user_data[profile]" id="user_data_profile">
</textarea>
</div>
</div>
<div class="form-actions">
<input type="submit" name="commit" value="Sign Up" />
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment