如何使用html或php使用“ http：//”预填充type =“ url”表单字段？

Question

Problem : on a form asking for the user's website, a type="url" form field returns an error unless "http://" precedes the domain name (there's even an error with "www.").

Outcome I am seeking : a PHP/HTML* method of partly pre-filling the type="url" field with "http://" so it's more user-friendly for users to type "companywebsite.com" into the field and submit without the error.

In other words, a user just fills in companywebsite.com and I want to pre-fill that with http:// so the end result is http://companywebsite.com

<h5>Website</h5>
<input type="url" name="company_website" id="company_website" value="" />

Image below is a screenshot of a form entry that has returned an error (because "http://" does not precede the stackoverflow.com domain).

* I did find a .js method ( https://gist.github.com/cvan/117bc1f88e4dfca6dba7 ) but I'm a novice and just learning php

Answer 1

There are a couple of ways you could go about this:

<input type="url" name="company_website" id="company_website" value="http://" />

However, I would advise against this because you can never trust the user to input correctly. Instead, assuming you are submitting your form via the POST method, in your php code,

<?php

    if(isset($_POST['company_website'])){
        $pos = strpos($_POST['company_website'], "http://");
        if($pos != 0){
            $website = "http://".$_POST['company_website'];
        }
        // do the rest
    }
?>

Answer 2

Well then. For the purpose of learning something about security, I'll write this answer with some example code, so you know how to do this kind of stuff safely in the future.

First, lets write a small form:

<form method="POST" action="your_php_file.php" accept-charset="utf-8">
    <input type="url" name="company_website" id="company_website" value="" />
    <input type="submit" value="Update website" />
</form>

Now lets start writing our PHP file based on this. First we need to be sure the user is submitting new data and not an empty string:

if(isset($_POST['company_website']) && !empty($_POST['company_website'])){

Next we'll write a function that checks if the string is a website or not:

function isWebsite($url){

To see if a string matches a website, we'll be using regular expressions. Regex can be quite complicated, so at the end of this answer, I'll post a link to learn more about them.

    $pattern = '#((https?|ftp)://(\S*?\.\S*?))([\s)\[\]{},;"\':<]|\.\s|$)#i';

Now lets write a simple if statement that returns us true or false. To keep it simple, this statement compares the variable $url (which contains the user data) with the above regular expression pattern in $pattern . It will return true if $url contains a valid website, or false if it doesn't.

    if(preg_match($pattern, $url)){
        return true;
    } else {
        return false;
    }
}

Next we'll write a function that adds 'http://' in front of the data send by the user:

function addHttp($url){
    $url = "http://". $url;
    return $url;
}

Now that our functions are complete, all we have to do is use them. First we'll check if the user already sent a valid website:

if(isWebsite($_POST['company_website'])){
    //The website is valid, so you can safely add it your database here
    } else {
        //The website is not valid, but the user might simply have forgotten
        //to add http:// in front of it. So lets do it for him:
        $website = addHttp($_POST['company_website']);

        //Still we can't be sure if it's a valid website. It might be a string
        //that will try to mess with your database. So lets verify it again:
        if(isWebsite($website)){
            //The website is now valid, so you can safely add it your database here
        } else {
            //The website is still not valid, so we need to return an error
            //to your user:
            echo "It seems you didn't enter a valid website. Please try again!";
            exit;
        }
    }
}

As you might have noticed, we have 2 places in our code where we need to write the same code to insert everything in the database. You could use a function for that as well:

function addToDatabase($url){
    //Write your code to add everything to database here. $url will contain the website
}

So the complete code would become as follows:

<?php

if(isset($_POST['company_website']) && !empty($_POST['company_website'])){

    function isWebsite($url){
        $pattern = '#((https?|ftp)://(\S*?\.\S*?))([\s)\[\]{},;"\':<]|\.\s|$)#i';

        if(preg_match($pattern, $url)){
            return true;
        } else {
            return false;
        }
    }

    function addHttp($url){
        $url = "http://". $url;
        return $url;
    }

    function addToDatabase($url){
        //Write your code to add everything to database here. $url will contain the website
    }

    if(isWebsite($_POST['company_website'])){
        addToDatabase($_POST['company_website']);
    } else {
        //The website is not valid, try adding 'http://'
        $website = addHttp($_POST['company_website']);

        if(isWebsite($website)){
            addToDatabase($website);
        } else {
            //The website is still not valid, return error
            echo "It seems you didn't enter a valid website. Please try again!";
            exit;
        }
    }
}

?>

I should add that it still might not be safe to just blindly add the website to your database. To make it absolutely secure, you'll need to use PDO() or MySQLi() in combination with Prepared Statements. But explaining that in this answer would turn this into a book. So make sure to learn about it!

Lastly I promissed to give a resource to learn more about Regular Expressions. The best and safest resource would be from the official PHP website itself. You can find it here: PHP: Pattern Syntax