Snippets Collections

Recent | Popular

view_listList view view_moduleGrid view
content_copy

#callback #functions #forms

callback functions explained version 2 Form and value 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Example</title>
</head>
<body>
  <form id="myForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <button type="button" onclick="handleFormSubmit()">Submit</button>
  </form>

  <script src="script.js"></script>
</body>
</html>



// the JS
// Function to get the value from the input field
function getValue(callback) {
  // Get the input field
  const nameInput = document.getElementById('name');
  // Get the value from the input field
  const nameValue = nameInput.value;
  // Pass the value to the callback function
  callback(nameValue);
}

// Callback function to process the value
function processValue(value) {
  console.log('Processing value...');
  console.log(`Value received: ${value}`);
  // You can add more logic here to process the value further
}

// Function to handle form submission
function handleFormSubmit() {
  getValue(processValue);
}
content_copy

#css #forms #custom #radio

custom radio buttons 
/* single checkbox */

body.snapform .form-group .snap-field .check-box-label{
    padding-left: 40px!important;
}


body.snapform .form-group .snap-field span.checkbox.custom-checkbox label:before{
	width: 32px;
    height: 32px;
    visibility: visible;
    content: " ";
    display: block;
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    z-index: 100;
    left: 0px;
    left: 0rem;
    border: 2px solid transparent;
    top: 0;
    background-color: transparent;
    border-color: var(--QLD-color-light-designAccent);
    background-image: none !important;
}

body.snapform .form-group .snap-field span.checkbox.custom-checkbox label:after{
	width: 32px;
    height: 32px;
    visibility: visible;
    content: " ";
    display: block;
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    z-index: 100;
    left: 0px;
    left: 0rem;
    border: 2px solid transparent;
    top: 0;
}


body.snapform .form-group .snap-field span.checkbox.custom-checkbox input[type="checkbox"]:checked+label:before{
	width: 32px!important;
    height: 32px!important;
    visibility: visible;
    content: " ";
    display: block;
    position: absolute;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    z-index: 100;
    left: 0px;
    left: 0rem;
    border: 2px solid transparent;
    top: 0;
    background-color: transparent!important;
    border-color: var(--QLD-color-light-designAccent)!important;
    background-image: none !important;

}


body.snapform .form-group .snap-field span.checkbox.custom-checkbox input[type="checkbox"]:checked+label:after{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='var(--QLD-color-light-text)' d='M25.6,11.4c0.2-0.2,0.2-0.5,0-0.7l-2.3-2.3c-0.2-0.2-0.5-0.2-0.7,0L14,17l-3.6-3.6c-0.2-0.2-0.5-0.2-0.7,0l-2.3,2.3 c-0.2,0.2-0.2,0.5,0,0.7l6.3,6.3c0.2,0.2,0.5,0.2,0.7,0L25.6,11.4L25.6,11.4z'/%3E%3C/svg%3E");
    background-size: 30px!important;
    background-position: -2px -2px!important;
    font-size: 20px !important;
    left: 0px!important;

}
content_copy

#forms #recaptcha #captcha

Disable Submit until reCAPTCHA is clicked 
<script is:inline>
    document.getElementById('wf-form-Digital-Wings-Contact-Page-Form').addEventListener('submit', function (event) {
      if (window.grecaptcha.getResponse().length > 0) { return; }
      event.preventDefault();
    });
</script>
content_copy

#php #secure #input #forms

Filter and Secure Input Forms - PHP Function 
function secure_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
content_copy

#django #internationalization #localization #formview #forms #genericviews

FormView get success url according to current language 
// views.py
class SomeFormView(FormView):

    def get_success_url(self):
        if 'ka' in self.request.get_full_path():
            success_url = '/ka/message-sent/'
        elif 'en' in self.request.get_full_path():
            success_url = '/en/message-sent/'
        else:
            success_url = '/message-sent/'
        return success_url

// template.html
<form action="{% url 'app_name:message-sent' %}">
  	{% csrf_token %}
	{{ form }}  
</form>
content_copy

#html #forms

Ensure the remaining content doesn't hide behind the #navbar 
/* #navbar is the topmost element and <main> contains all other content */

#navbar {
  /* CSS property ensuring #navbar always stays in the same place even if the page is scrolled: */
  position: fixed;
}

main {
  /* Ensure the remaining content doesn't hide behind the #navbar: */
  position: absolute;
  z-index: 1;
  top: 100px;
}
content_copy

#html #forms

why will the information from the first <input> element NOT be sent to /processing.html when the form is submitted? 
<!--código mal-->
<form action="/processing.html" method="GET">
  <input type="text" id="username">
  <input type="submit" value="submit"> 
</form>
content_copy

#html #forms

A form containing a slider that has a maximum value of 100, a minimum of 0 and moves in steps of 10 
<form action="/processing.html" method="GET">
  <label for="mystery">What gets rendered?</label>
  <input type="range" id="mystery" name="mystery" min="0" max="100" step="10">
</form>
content_copy

#css #design #forms

[CSS] Hiding arrows in Numeric Form Input 
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

html {
    background-color: peachpuff;

callback functions explained version 2 Form and value
star

Sun Jun 23 2024 04:31:38 GMT+0000 (Coordinated Universal Time)

#callback #functions #forms

custom radio buttons
star

Mon Jun 10 2024 06:09:03 GMT+0000 (Coordinated Universal Time)

#css #forms #custom #radio

Disable Submit until reCAPTCHA is clicked
star

Sun Dec 10 2023 08:38:04 GMT+0000 (Coordinated Universal Time) https://answers.netlify.com/t/know-if-recaptcha-v2-was-checked-or-not/41271/14

#forms #recaptcha #captcha

Filter and Secure Input Forms - PHP Function
star

Thu Mar 24 2022 18:14:58 GMT+0000 (Coordinated Universal Time)

#php #secure #input #forms

FormView get success url according to current language
star

Fri Oct 22 2021 00:15:38 GMT+0000 (Coordinated Universal Time)

#django #internationalization #localization #formview #forms #genericviews

Ensure the remaining content doesn't hide behind the #navbar
star

Sat Oct 09 2021 11:20:02 GMT+0000 (Coordinated Universal Time) https://www.codecademy.com/practice/tracks/learn-css/modules/learn-css-display-positioning

#html #forms

why will the information from the first <input> element NOT be sent to /processing.html when the form is submitted?
star

Wed Oct 06 2021 00:09:29 GMT+0000 (Coordinated Universal Time)

#html #forms

A form containing a slider that has a maximum value of 100, a minimum of 0 and moves in steps of 10
star

Wed Oct 06 2021 00:04:27 GMT+0000 (Coordinated Universal Time) https://www.codecademy.com/

#html #forms

[CSS] Hiding arrows in Numeric Form Input
star

Fri Sep 03 2021 10:53:06 GMT+0000 (Coordinated Universal Time)

#css #design #forms

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension