Search

HTML's Articles

Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.

Block and Inline elements
Every element in HTML has display level. There are two types of display level which decide how it will display in browser. Block-level elements Inline elements Block-level Elements Block-level elements always occupy full width in the browser. So new elements always starts with new line in browser. Example: <!DOCTYPE html> <html> <head>     <style type="text/css">         p {             background-color: pink;         }     </style> </head> <body>     <p>This is block level element and occupy full width.</p>     <p>This is also block level element and will start on new line.</p> </body> </html> The below is a list of few block-level elements. All headings <h1>, <h2>, <h3>, <h4>, <h5>, <h6> Paragraph <p> <nav>, <form>, <table> <ul>, <ol>, <li>, <div> etc. Inline elements Inline element doesn't starts from new line. It always start with left side of the document and only takes space as it require. Below in example, span and a elements are inline elements. <!DOCTYPE html> <html> <head>     <style type="text/css">         span {             background-color: pink;         }     </style> </head> <body>     <div>This is block level element and <span>this is inline element.</span> The inline element <a href="#">starts from the left</a> side of element.</div> </body> </html> The below is a list of few inline elements. <span> <a>, <button>, <img>, <input>, <select>, <textarea>, <b>, <i>, <em>, <code>, <strong>  
HTML Country Select Dropdown List
You might need an select drop-down list country with different type of value. Here is all list of countries list. If you need two digit country code list: <select>     <option value="AF">Afghanistan</option>     <option value="AX">Åland Islands</option>     <option value="AL">Albania</option>     <option value="DZ">Algeria</option>     <option value="AS">American Samoa</option>     <option value="AD">Andorra</option>     <option value="AO">Angola</option>     <option value="AI">Anguilla</option>     <option value="AQ">Antarctica</option>     <option value="AG">Antigua and Barbuda</option>     <option value="AR">Argentina</option>     <option value="AM">Armenia</option>     <option value="AW">Aruba</option>     <option value="AU">Australia</option>     <option value="AT">Austria</option>     <option value="AZ">Azerbaijan</option>     <option value="BS">Bahamas</option>     <option value="BH">Bahrain</option>     <option value="BD">Bangladesh</option>     <option value="BB">Barbados</option>     <option value="BY">Belarus</option>     <option value="BE">Belgium</option>     <option value="BZ">Belize</option>     <option value="BJ">Benin</option>     <option value="BM">Bermuda</option>     <option value="BT">Bhutan</option>     <option value="BO">Bolivia, Plurinational State of</option>     <option value="BQ">Bonaire, Sint Eustatius and Saba</option>     <option value="BA">Bosnia and Herzegovina</option>     <option value="BW">Botswana</option>     <option value="BV">Bouvet Island</option>     <option value="BR">Brazil</option>     <option value="IO">British Indian Ocean Territory</option>     <option value="BN">Brunei Darussalam</option>     <option value="BG">Bulgaria</option>     <option value="BF">Burkina Faso</option>     <option value="BI">Burundi</option>     <option value="KH">Cambodia</option>     <option value="CM">Cameroon</option>     <option value="CA">Canada</option>     <option value="CV">Cape Verde</option>     <option value="KY">Cayman Islands</option>     <option value="CF">Central African Republic</option>     <option value="TD">Chad</option>     <option value="CL">Chile</option>     <option value="CN">China</option>     <option value="CX">Christmas Island</option>     <option value="CC">Cocos (Keeling) Islands</option>     <option value="CO">Colombia</option>     <option value="KM">Comoros</option>     <option value="CG">Congo</option>     <option value="CD">Congo, the Democratic Republic of the</option>     <option value="CK">Cook Islands</option>     <option value="CR">Costa Rica</option>     <option value="CI">Côte d'Ivoire</option>     <option value="HR">Croatia</option>     <option value="CU">Cuba</option>     <option value="CW">Curaçao</option>     <option value="CY">Cyprus</option>     <option value="CZ">Czech Republic</option>     <option value="DK">Denmark</option>     <option value="DJ">Djibouti</option>     <option value="DM">Dominica</option>     <option value="DO">Dominican Republic</option>     <option value="EC">Ecuador</option>     <option value="EG">Egypt</option>     <option value="SV">El Salvador</option>     <option value="GQ">Equatorial Guinea</option>     <option value="ER">Eritrea</option>     <option value="EE">Estonia</option>     <option value="ET">Ethiopia</option>     <option value="FK">Falkland Islands (Malvinas)</option>     <option value="FO">Faroe Islands</option>     <option value="FJ">Fiji</option>     <option value="FI">Finland</option>     <option value="FR">France</option>     <option value="GF">French Guiana</option>     <option value="PF">French Polynesia</option>     <option value="TF">French Southern Territories</option>     <option value="GA">Gabon</option>     <option value="GM">Gambia</option>     <option value="GE">Georgia</option>     <option value="DE">Germany</option>     <option value="GH">Ghana</option>     <option value="GI">Gibraltar</option>     <option value="GR">Greece</option>     <option value="GL">Greenland</option>     <option value="GD">Grenada</option>     <option value="GP">Guadeloupe</option>     <option value="GU">Guam</option>     <option value="GT">Guatemala</option>     <option value="GG">Guernsey</option>     <option value="GN">Guinea</option>     <option value="GW">Guinea-Bissau</option>     <option value="GY">Guyana</option>     <option value="HT">Haiti</option>     <option value="HM">Heard Island and McDonald Islands</option>     <option value="VA">Holy See (Vatican City State)</option>     <option value="HN">Honduras</option>     <option value="HK">Hong Kong</option>     <option value="HU">Hungary</option>     <option value="IS">Iceland</option>     <option value="IN">India</option>     <option value="ID">Indonesia</option>     <option value="IR">Iran, Islamic Republic of</option>     <option value="IQ">Iraq</option>     <option value="IE">Ireland</option>     <option value="IM">Isle of Man</option>     <option value="IL">Israel</option>     <option value="IT">Italy</option>     <option value="JM">Jamaica</option>     <option value="JP">Japan</option>     <option value="JE">Jersey</option>     <option value="JO">Jordan</option>     <option value="KZ">Kazakhstan</option>     <option value="KE">Kenya</option>     <option value="KI">Kiribati</option>     <option value="KP">Korea, Democratic People's Republic of</option>     <option value="KR">Korea, Republic of</option>     <option value="KW">Kuwait</option>     <option value="KG">Kyrgyzstan</option>     <option value="LA">Lao People's Democratic Republic</option>     <option value="LV">Latvia</option>     <option value="LB">Lebanon</option>     <option value="LS">Lesotho</option>     <option value="LR">Liberia</option>     <option value="LY">Libya</option>     <option value="LI">Liechtenstein</option>     <option value="LT">Lithuania</option>     <option value="LU">Luxembourg</option>     <option value="MO">Macao</option>     <option value="MK">Macedonia, the former Yugoslav Republic of</option>     <option value="MG">Madagascar</option>     <option value="MW">Malawi</option>     <option value="MY">Malaysia</option>     <option value="MV">Maldives</option>     <option value="ML">Mali</option>     <option value="MT">Malta</option>     <option value="MH">Marshall Islands</option>     <option value="MQ">Martinique</option>     <option value="MR">Mauritania</option>     <option value="MU">Mauritius</option>     <option value="YT">Mayotte</option>     <option value="MX">Mexico</option>     <option value="FM">Micronesia, Federated States of</option>     <option value="MD">Moldova, Republic of</option>     <option value="MC">Monaco</option>     <option value="MN">Mongolia</option>     <option value="ME">Montenegro</option>     <option value="MS">Montserrat</option>     <option value="MA">Morocco</option>     <option value="MZ">Mozambique</option>     <option value="MM">Myanmar</option>     <option value="NA">Namibia</option>     <option value="NR">Nauru</option>     <option value="NP">Nepal</option>     <option value="NL">Netherlands</option>     <option value="NC">New Caledonia</option>     <option value="NZ">New Zealand</option>     <option value="NI">Nicaragua</option>     <option value="NE">Niger</option>     <option value="NG">Nigeria</option>     <option value="NU">Niue</option>     <option value="NF">Norfolk Island</option>     <option value="MP">Northern Mariana Islands</option>     <option value="NO">Norway</option>     <option value="OM">Oman</option>     <option value="PK">Pakistan</option>     <option value="PW">Palau</option>     <option value="PS">Palestinian Territory, Occupied</option>     <option value="PA">Panama</option>     <option value="PG">Papua New Guinea</option>     <option value="PY">Paraguay</option>     <option value="PE">Peru</option>     <option value="PH">Philippines</option>     <option value="PN">Pitcairn</option>     <option value="PL">Poland</option>     <option value="PT">Portugal</option>     <option value="PR">Puerto Rico</option>     <option value="QA">Qatar</option>     <option value="RE">Réunion</option>     <option value="RO">Romania</option>     <option value="RU">Russian Federation</option>     <option value="RW">Rwanda</option>     <option value="BL">Saint Barthélemy</option>     <option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>     <option value="KN">Saint Kitts and Nevis</option>     <option value="LC">Saint Lucia</option>     <option value="MF">Saint Martin (French part)</option>     <option value="PM">Saint Pierre and Miquelon</option>     <option value="VC">Saint Vincent and the Grenadines</option>     <option value="WS">Samoa</option>     <option value="SM">San Marino</option>     <option value="ST">Sao Tome and Principe</option>     <option value="SA">Saudi Arabia</option>     <option value="SN">Senegal</option>     <option value="RS">Serbia</option>     <option value="SC">Seychelles</option>     <option value="SL">Sierra Leone</option>     <option value="SG">Singapore</option>     <option value="SX">Sint Maarten (Dutch part)</option>     <option value="SK">Slovakia</option>     <option value="SI">Slovenia</option>     <option value="SB">Solomon Islands</option>     <option value="SO">Somalia</option>     <option value="ZA">South Africa</option>     <option value="GS">South Georgia and the South Sandwich Islands</option>     <option value="SS">South Sudan</option>     <option value="ES">Spain</option>     <option value="LK">Sri Lanka</option>     <option value="SD">Sudan</option>     <option value="SR">Suriname</option>     <option value="SJ">Svalbard and Jan Mayen</option>     <option value="SZ">Swaziland</option>     <option value="SE">Sweden</option>     <option value="CH">Switzerland</option>     <option value="SY">Syrian Arab Republic</option>     <option value="TW">Taiwan, Province of China</option>     <option value="TJ">Tajikistan</option>     <option value="TZ">Tanzania, United Republic of</option>     <option value="TH">Thailand</option>     <option value="TL">Timor-Leste</option>     <option value="TG">Togo</option>     <option value="TK">Tokelau</option>     <option value="TO">Tonga</option>     <option value="TT">Trinidad and Tobago</option>     <option value="TN">Tunisia</option>     <option value="TR">Turkey</option>     <option value="TM">Turkmenistan</option>     <option value="TC">Turks and Caicos Islands</option>     <option value="TV">Tuvalu</option>     <option value="UG">Uganda</option>     <option value="UA">Ukraine</option>     <option value="AE">United Arab Emirates</option>     <option value="GB">United Kingdom</option>     <option value="US">United States</option>     <option value="UM">United States Minor Outlying Islands</option>     <option value="UY">Uruguay</option>     <option value="UZ">Uzbekistan</option>     <option value="VU">Vanuatu</option>     <option value="VE">Venezuela, Bolivarian Republic of</option>     <option value="VN">Viet Nam</option>     <option value="VG">Virgin Islands, British</option>     <option value="VI">Virgin Islands, U.S.</option>     <option value="WF">Wallis and Futuna</option>     <option value="EH">Western Sahara</option>     <option value="YE">Yemen</option>     <option value="ZM">Zambia</option>     <option value="ZW">Zimbabwe</option> </select> Same way, if you want 3 digit country code instead of two digit, here is the list. <select>     <option value="AFG">Afghanistan</option>     <option value="ALA">Åland Islands</option>     <option value="ALB">Albania</option>     <option value="DZA">Algeria</option>     <option value="ASM">American Samoa</option>     <option value="AND">Andorra</option>     <option value="AGO">Angola</option>     <option value="AIA">Anguilla</option>     <option value="ATA">Antarctica</option>     <option value="ATG">Antigua and Barbuda</option>     <option value="ARG">Argentina</option>     <option value="ARM">Armenia</option>     <option value="ABW">Aruba</option>     <option value="AUS">Australia</option>     <option value="AUT">Austria</option>     <option value="AZE">Azerbaijan</option>     <option value="BHS">Bahamas</option>     <option value="BHR">Bahrain</option>     <option value="BGD">Bangladesh</option>     <option value="BRB">Barbados</option>     <option value="BLR">Belarus</option>     <option value="BEL">Belgium</option>     <option value="BLZ">Belize</option>     <option value="BEN">Benin</option>     <option value="BMU">Bermuda</option>     <option value="BTN">Bhutan</option>     <option value="BOL">Bolivia, Plurinational State of</option>     <option value="BES">Bonaire, Sint Eustatius and Saba</option>     <option value="BIH">Bosnia and Herzegovina</option>     <option value="BWA">Botswana</option>     <option value="BVT">Bouvet Island</option>     <option value="BRA">Brazil</option>     <option value="IOT">British Indian Ocean Territory</option>     <option value="BRN">Brunei Darussalam</option>     <option value="BGR">Bulgaria</option>     <option value="BFA">Burkina Faso</option>     <option value="BDI">Burundi</option>     <option value="KHM">Cambodia</option>     <option value="CMR">Cameroon</option>     <option value="CAN">Canada</option>     <option value="CPV">Cape Verde</option>     <option value="CYM">Cayman Islands</option>     <option value="CAF">Central African Republic</option>     <option value="TCD">Chad</option>     <option value="CHL">Chile</option>     <option value="CHN">China</option>     <option value="CXR">Christmas Island</option>     <option value="CCK">Cocos (Keeling) Islands</option>     <option value="COL">Colombia</option>     <option value="COM">Comoros</option>     <option value="COG">Congo</option>     <option value="COD">Congo, the Democratic Republic of the</option>     <option value="COK">Cook Islands</option>     <option value="CRI">Costa Rica</option>     <option value="CIV">Côte d'Ivoire</option>     <option value="HRV">Croatia</option>     <option value="CUB">Cuba</option>     <option value="CUW">Curaçao</option>     <option value="CYP">Cyprus</option>     <option value="CZE">Czech Republic</option>     <option value="DNK">Denmark</option>     <option value="DJI">Djibouti</option>     <option value="DMA">Dominica</option>     <option value="DOM">Dominican Republic</option>     <option value="ECU">Ecuador</option>     <option value="EGY">Egypt</option>     <option value="SLV">El Salvador</option>     <option value="GNQ">Equatorial Guinea</option>     <option value="ERI">Eritrea</option>     <option value="EST">Estonia</option>     <option value="ETH">Ethiopia</option>     <option value="FLK">Falkland Islands (Malvinas)</option>     <option value="FRO">Faroe Islands</option>     <option value="FJI">Fiji</option>     <option value="FIN">Finland</option>     <option value="FRA">France</option>     <option value="GUF">French Guiana</option>     <option value="PYF">French Polynesia</option>     <option value="ATF">French Southern Territories</option>     <option value="GAB">Gabon</option>     <option value="GMB">Gambia</option>     <option value="GEO">Georgia</option>     <option value="DEU">Germany</option>     <option value="GHA">Ghana</option>     <option value="GIB">Gibraltar</option>     <option value="GRC">Greece</option>     <option value="GRL">Greenland</option>     <option value="GRD">Grenada</option>     <option value="GLP">Guadeloupe</option>     <option value="GUM">Guam</option>     <option value="GTM">Guatemala</option>     <option value="GGY">Guernsey</option>     <option value="GIN">Guinea</option>     <option value="GNB">Guinea-Bissau</option>     <option value="GUY">Guyana</option>     <option value="HTI">Haiti</option>     <option value="HMD">Heard Island and McDonald Islands</option>     <option value="VAT">Holy See (Vatican City State)</option>     <option value="HND">Honduras</option>     <option value="HKG">Hong Kong</option>     <option value="HUN">Hungary</option>     <option value="ISL">Iceland</option>     <option value="IND">India</option>     <option value="IDN">Indonesia</option>     <option value="IRN">Iran, Islamic Republic of</option>     <option value="IRQ">Iraq</option>     <option value="IRL">Ireland</option>     <option value="IMN">Isle of Man</option>     <option value="ISR">Israel</option>     <option value="ITA">Italy</option>     <option value="JAM">Jamaica</option>     <option value="JPN">Japan</option>     <option value="JEY">Jersey</option>     <option value="JOR">Jordan</option>     <option value="KAZ">Kazakhstan</option>     <option value="KEN">Kenya</option>     <option value="KIR">Kiribati</option>     <option value="PRK">Korea, Democratic People's Republic of</option>     <option value="KOR">Korea, Republic of</option>     <option value="KWT">Kuwait</option>     <option value="KGZ">Kyrgyzstan</option>     <option value="LAO">Lao People's Democratic Republic</option>     <option value="LVA">Latvia</option>     <option value="LBN">Lebanon</option>     <option value="LSO">Lesotho</option>     <option value="LBR">Liberia</option>     <option value="LBY">Libya</option>     <option value="LIE">Liechtenstein</option>     <option value="LTU">Lithuania</option>     <option value="LUX">Luxembourg</option>     <option value="MAC">Macao</option>     <option value="MKD">Macedonia, the former Yugoslav Republic of</option>     <option value="MDG">Madagascar</option>     <option value="MWI">Malawi</option>     <option value="MYS">Malaysia</option>     <option value="MDV">Maldives</option>     <option value="MLI">Mali</option>     <option value="MLT">Malta</option>     <option value="MHL">Marshall Islands</option>     <option value="MTQ">Martinique</option>     <option value="MRT">Mauritania</option>     <option value="MUS">Mauritius</option>     <option value="MYT">Mayotte</option>     <option value="MEX">Mexico</option>     <option value="FSM">Micronesia, Federated States of</option>     <option value="MDA">Moldova, Republic of</option>     <option value="MCO">Monaco</option>     <option value="MNG">Mongolia</option>     <option value="MNE">Montenegro</option>     <option value="MSR">Montserrat</option>     <option value="MAR">Morocco</option>     <option value="MOZ">Mozambique</option>     <option value="MMR">Myanmar</option>     <option value="NAM">Namibia</option>     <option value="NRU">Nauru</option>     <option value="NPL">Nepal</option>     <option value="NLD">Netherlands</option>     <option value="NCL">New Caledonia</option>     <option value="NZL">New Zealand</option>     <option value="NIC">Nicaragua</option>     <option value="NER">Niger</option>     <option value="NGA">Nigeria</option>     <option value="NIU">Niue</option>     <option value="NFK">Norfolk Island</option>     <option value="MNP">Northern Mariana Islands</option>     <option value="NOR">Norway</option>     <option value="OMN">Oman</option>     <option value="PAK">Pakistan</option>     <option value="PLW">Palau</option>     <option value="PSE">Palestinian Territory, Occupied</option>     <option value="PAN">Panama</option>     <option value="PNG">Papua New Guinea</option>     <option value="PRY">Paraguay</option>     <option value="PER">Peru</option>     <option value="PHL">Philippines</option>     <option value="PCN">Pitcairn</option>     <option value="POL">Poland</option>     <option value="PRT">Portugal</option>     <option value="PRI">Puerto Rico</option>     <option value="QAT">Qatar</option>     <option value="REU">Réunion</option>     <option value="ROU">Romania</option>     <option value="RUS">Russian Federation</option>     <option value="RWA">Rwanda</option>     <option value="BLM">Saint Barthélemy</option>     <option value="SHN">Saint Helena, Ascension and Tristan da Cunha</option>     <option value="KNA">Saint Kitts and Nevis</option>     <option value="LCA">Saint Lucia</option>     <option value="MAF">Saint Martin (French part)</option>     <option value="SPM">Saint Pierre and Miquelon</option>     <option value="VCT">Saint Vincent and the Grenadines</option>     <option value="WSM">Samoa</option>     <option value="SMR">San Marino</option>     <option value="STP">Sao Tome and Principe</option>     <option value="SAU">Saudi Arabia</option>     <option value="SEN">Senegal</option>     <option value="SRB">Serbia</option>     <option value="SYC">Seychelles</option>     <option value="SLE">Sierra Leone</option>     <option value="SGP">Singapore</option>     <option value="SXM">Sint Maarten (Dutch part)</option>     <option value="SVK">Slovakia</option>     <option value="SVN">Slovenia</option>     <option value="SLB">Solomon Islands</option>     <option value="SOM">Somalia</option>     <option value="ZAF">South Africa</option>     <option value="SGS">South Georgia and the South Sandwich Islands</option>     <option value="SSD">South Sudan</option>     <option value="ESP">Spain</option>     <option value="LKA">Sri Lanka</option>     <option value="SDN">Sudan</option>     <option value="SUR">Suriname</option>     <option value="SJM">Svalbard and Jan Mayen</option>     <option value="SWZ">Swaziland</option>     <option value="SWE">Sweden</option>     <option value="CHE">Switzerland</option>     <option value="SYR">Syrian Arab Republic</option>     <option value="TWN">Taiwan, Province of China</option>     <option value="TJK">Tajikistan</option>     <option value="TZA">Tanzania, United Republic of</option>     <option value="THA">Thailand</option>     <option value="TLS">Timor-Leste</option>     <option value="TGO">Togo</option>     <option value="TKL">Tokelau</option>     <option value="TON">Tonga</option>     <option value="TTO">Trinidad and Tobago</option>     <option value="TUN">Tunisia</option>     <option value="TUR">Turkey</option>     <option value="TKM">Turkmenistan</option>     <option value="TCA">Turks and Caicos Islands</option>     <option value="TUV">Tuvalu</option>     <option value="UGA">Uganda</option>     <option value="UKR">Ukraine</option>     <option value="ARE">United Arab Emirates</option>     <option value="GBR">United Kingdom</option>     <option value="USA">United States</option>     <option value="UMI">United States Minor Outlying Islands</option>     <option value="URY">Uruguay</option>     <option value="UZB">Uzbekistan</option>     <option value="VUT">Vanuatu</option>     <option value="VEN">Venezuela, Bolivarian Republic of</option>     <option value="VNM">Viet Nam</option>     <option value="VGB">Virgin Islands, British</option>     <option value="VIR">Virgin Islands, U.S.</option>     <option value="WLF">Wallis and Futuna</option>     <option value="ESH">Western Sahara</option>     <option value="YEM">Yemen</option>     <option value="ZMB">Zambia</option>     <option value="ZWE">Zimbabwe</option> </select> And in case if you want international phone code, here is the list. <select>     <option value="213">Algeria (+213)</option>     <option value="376">Andorra (+376)</option>     <option value="244">Angola (+244)</option>     <option value="1264">Anguilla (+1264)</option>     <option value="1268">Antigua & Barbuda (+1268)</option>     <option value="54">Argentina (+54)</option>     <option value="374">Armenia (+374)</option>     <option value="297">Aruba (+297)</option>     <option value="61">Australia (+61)</option>     <option value="43">Austria (+43)</option>     <option value="994">Azerbaijan (+994)</option>     <option value="1242">Bahamas (+1242)</option>     <option value="973">Bahrain (+973)</option>     <option value="880">Bangladesh (+880)</option>     <option value="1246">Barbados (+1246)</option>     <option value="375">Belarus (+375)</option>     <option value="32">Belgium (+32)</option>     <option value="501">Belize (+501)</option>     <option value="229">Benin (+229)</option>     <option value="1441">Bermuda (+1441)</option>     <option value="975">Bhutan (+975)</option>     <option value="591">Bolivia (+591)</option>     <option value="387">Bosnia Herzegovina (+387)</option>     <option value="267">Botswana (+267)</option>     <option value="55">Brazil (+55)</option>     <option value="673">Brunei (+673)</option>     <option value="359">Bulgaria (+359)</option>     <option value="226">Burkina Faso (+226)</option>     <option value="257">Burundi (+257)</option>     <option value="855">Cambodia (+855)</option>     <option value="237">Cameroon (+237)</option>     <option value="1">Canada (+1)</option>     <option value="238">Cape Verde Islands (+238)</option>     <option value="1345">Cayman Islands (+1345)</option>     <option value="236">Central African Republic (+236)</option>     <option value="56">Chile (+56)</option>     <option value="86">China (+86)</option>     <option value="57">Colombia (+57)</option>     <option value="269">Comoros (+269)</option>     <option value="242">Congo (+242)</option>     <option value="682">Cook Islands (+682)</option>     <option value="506">Costa Rica (+506)</option>     <option value="385">Croatia (+385)</option>     <option value="53">Cuba (+53)</option>     <option value="90">Cyprus - North (+90)</option>     <option value="357">Cyprus - South (+357)</option>     <option value="420">Czech Republic (+420)</option>     <option value="45">Denmark (+45)</option>     <option value="253">Djibouti (+253)</option>     <option value="1809">Dominica (+1809)</option>     <option value="1809">Dominican Republic (+1809)</option>     <option value="593">Ecuador (+593)</option>     <option value="20">Egypt (+20)</option>     <option value="503">El Salvador (+503)</option>     <option value="240">Equatorial Guinea (+240)</option>     <option value="291">Eritrea (+291)</option>     <option value="372">Estonia (+372)</option>     <option value="251">Ethiopia (+251)</option>     <option value="500">Falkland Islands (+500)</option>     <option value="298">Faroe Islands (+298)</option>     <option value="679">Fiji (+679)</option>     <option value="358">Finland (+358)</option>     <option value="33">France (+33)</option>     <option value="594">French Guiana (+594)</option>     <option value="689">French Polynesia (+689)</option>     <option value="241">Gabon (+241)</option>     <option value="220">Gambia (+220)</option>     <option value="7880">Georgia (+7880)</option>     <option value="49">Germany (+49)</option>     <option value="233">Ghana (+233)</option>     <option value="350">Gibraltar (+350)</option>     <option value="30">Greece (+30)</option>     <option value="299">Greenland (+299)</option>     <option value="1473">Grenada (+1473)</option>     <option value="590">Guadeloupe (+590)</option>     <option value="671">Guam (+671)</option>     <option value="502">Guatemala (+502)</option>     <option value="224">Guinea (+224)</option>     <option value="245">Guinea - Bissau (+245)</option>     <option value="592">Guyana (+592)</option>     <option value="509">Haiti (+509)</option>     <option value="504">Honduras (+504)</option>     <option value="852">Hong Kong (+852)</option>     <option value="36">Hungary (+36)</option>     <option value="354">Iceland (+354)</option>     <option value="91">India (+91)</option>     <option value="62">Indonesia (+62)</option>     <option value="964">Iraq (+964)</option>     <option value="98">Iran (+98)</option>     <option value="353">Ireland (+353)</option>     <option value="972">Israel (+972)</option>     <option value="39">Italy (+39)</option>     <option value="1876">Jamaica (+1876)</option>     <option value="81">Japan (+81)</option>     <option value="962">Jordan (+962)</option>     <option value="7">Kazakhstan (+7)</option>     <option value="254">Kenya (+254)</option>     <option value="686">Kiribati (+686)</option>     <option value="850">Korea - North (+850)</option>     <option value="82">Korea - South (+82)</option>     <option value="965">Kuwait (+965)</option>     <option value="996">Kyrgyzstan (+996)</option>     <option value="856">Laos (+856)</option>     <option value="371">Latvia (+371)</option>     <option value="961">Lebanon (+961)</option>     <option value="266">Lesotho (+266)</option>     <option value="231">Liberia (+231)</option>     <option value="218">Libya (+218)</option>     <option value="417">Liechtenstein (+417)</option>     <option value="370">Lithuania (+370)</option>     <option value="352">Luxembourg (+352)</option>     <option value="853">Macao (+853)</option>     <option value="389">Macedonia (+389)</option>     <option value="261">Madagascar (+261)</option>     <option value="265">Malawi (+265)</option>     <option value="60">Malaysia (+60)</option>     <option value="960">Maldives (+960)</option>     <option value="223">Mali (+223)</option>     <option value="356">Malta (+356)</option>     <option value="692">Marshall Islands (+692)</option>     <option value="596">Martinique (+596)</option>     <option value="222">Mauritania (+222)</option>     <option value="269">Mayotte (+269)</option>     <option value="52">Mexico (+52)</option>     <option value="691">Micronesia (+691)</option>     <option value="373">Moldova (+373)</option>     <option value="377">Monaco (+377)</option>     <option value="976">Mongolia (+976)</option>     <option value="1664">Montserrat (+1664)</option>     <option value="212">Morocco (+212)</option>     <option value="258">Mozambique (+258)</option>     <option value="95">Myanmar (+95)</option>     <option value="264">Namibia (+264)</option>     <option value="674">Nauru (+674)</option>     <option value="977">Nepal (+977)</option>     <option value="31">Netherlands (+31)</option>     <option value="687">New Caledonia (+687)</option>     <option value="64">New Zealand (+64)</option>     <option value="505">Nicaragua (+505)</option>     <option value="227">Niger (+227)</option>     <option value="234">Nigeria (+234)</option>     <option value="683">Niue (+683)</option>     <option value="672">Norfolk Islands (+672)</option>     <option value="670">Northern Marianas (+670)</option>     <option value="47">Norway (+47)</option>     <option value="968">Oman (+968)</option>     <option value="92">Pakistan (+92)</option>     <option value="680">Palau (+680)</option>     <option value="507">Panama (+507)</option>     <option value="675">Papua New Guinea (+675)</option>     <option value="595">Paraguay (+595)</option>     <option value="51">Peru (+51)</option>     <option value="63">Philippines (+63)</option>     <option value="48">Poland (+48)</option>     <option value="351">Portugal (+351)</option>     <option value="1787">Puerto Rico (+1787)</option>     <option value="974">Qatar (+974)</option>     <option value="262">Reunion (+262)</option>     <option value="40">Romania (+40)</option>     <option value="7">Russia (+7)</option>     <option value="250">Rwanda (+250)</option>     <option value="378">San Marino (+378)</option>     <option value="239">Sao Tome & Principe (+239)</option>     <option value="966">Saudi Arabia (+966)</option>     <option value="221">Senegal (+221)</option>     <option value="381">Serbia (+381)</option>     <option value="248">Seychelles (+248)</option>     <option value="232">Sierra Leone (+232)</option>     <option value="65">Singapore (+65)</option>     <option value="421">Slovak Republic (+421)</option>     <option value="386">Slovenia (+386)</option>     <option value="677">Solomon Islands (+677)</option>     <option value="252">Somalia (+252)</option>     <option value="27">South Africa (+27)</option>     <option value="34">Spain (+34)</option>     <option value="94">Sri Lanka (+94)</option>     <option value="290">St. Helena (+290)</option>     <option value="1869">St. Kitts (+1869)</option>     <option value="1758">St. Lucia (+1758)</option>     <option value="597">Suriname (+597)</option>     <option value="249">Sudan (+249)</option>     <option value="268">Swaziland (+268)</option>     <option value="46">Sweden (+46)</option>     <option value="41">Switzerland (+41)</option>     <option value="963">Syria (+963)</option>     <option value="886">Taiwan (+886)</option>     <option value="992">Tajikistan (+992)</option>     <option value="66">Thailand (+66)</option>     <option value="228">Togo (+228)</option>     <option value="676">Tonga (+676)</option>     <option value="1868">Trinidad & Tobago (+1868)</option>     <option value="216">Tunisia (+216)</option>     <option value="90">Turkey (+90)</option>     <option value="993">Turkmenistan (+993)</option>     <option value="1649">Turks & Caicos Islands (+1649)</option>     <option value="688">Tuvalu (+688)</option>     <option value="256">Uganda (+256)</option>     <option value="380">Ukraine (+380)</option>     <option value="971">United Arab Emirates (+971)</option>     <option value="44">United Kingdom (+44)</option>     <option value="1">United States (+1)</option>     <option value="598">Uruguay (+598)</option>     <option value="998">Uzbekistan (+998)</option>     <option value="678">Vanuatu (+678)</option>     <option value="379">Vatican City (+379)</option>     <option value="58">Venezuela (+58)</option>     <option value="84">Vietnam (+84)</option>     <option value="1">Virgin Islands - British (+1)</option>     <option value="1">Virgin Islands - US (+1)</option>     <option value="681">Wallis & Futuna (+681)</option>     <option value="969">Yemen (North)(+969)</option>     <option value="967">Yemen (South)(+967)</option>     <option value="260">Zambia (+260)</option>     <option value="263">Zimbabwe (+263)</option> </select> I hope it will help you.          
Laravel Validation In Bootstrap Model Using Ajax
Today, Laravelcode share with you how to laravel validation handle in bootstrap popup using ajax. you have many time required this type functionality in your laravel aplication. so, we are write this tutorial for it how to dispan laravel validation error in bootstrap popoup or model. We all are very familiar with laravel simple validation on post request and handale all validation error after any validatioon false it is vary easy and very simple. but manage laravel validation in popoup or model without page refresh is little bit hard for new commer in laravel. When you use bootstrap model and popup for register form or any type of form that time you fill all the fields and click on submit button then if any validation false then how to handale in model without closing model when validation make false. We are use laravel register form for this tutorials. we are open laravel register form open in bootstrap model and then manage registration form validation in bootstrap popup or model. We are make some very easy code for it simple follow this step. Step : 1 Open Boostrap Model On Register Menu Link If youe have create laravel new project then open resources/views/layouts/app.blade.php file and add bootstrap model link on it. <li> <a href="#" data-toggle="modal" data-target="#SignUp">Register</a> </li> Add model link on register menu then create model Step : 2 Create Form In Model [ADDCODE] Now, we are create register form into bootstrap model when user click on register menu then open register form on model and here we are manage laravel validation if any validation false then it diplay into the model. <div id="SignUp" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3 class="modal-title text-center primecolor">Sign Up</h3> </div> <div class="modal-body" style="overflow: hidden;"> <div id="success-msg" class="hide"> <div class="alert alert-info alert-dismissible fade in" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>Success!</strong> Check your mail for login confirmation!! </div> </div> <div class="col-md-offset-1 col-md-10"> <form method="POST" id="Register"> {{ csrf_field() }} <div class="form-group has-feedback"> <input type="text" name="name" value="{{ old('name') }}" class="form-control" placeholder="Full name"> <span class="glyphicon glyphicon-user form-control-feedback"></span> <span class="text-danger"> <strong id="name-error"></strong> </span> </div> <div class="form-group has-feedback"> <input type="email" name="email" value="{{ old('email') }}" class="form-control" placeholder="Email"> <span class="glyphicon glyphicon-envelope form-control-feedback"></span> <span class="text-danger"> <strong id="email-error"></strong> </span> </div> <div class="form-group has-feedback"> <input type="password" name="password" class="form-control" placeholder="Password"> <span class="glyphicon glyphicon-lock form-control-feedback"></span> <span class="text-danger"> <strong id="password-error"></strong> </span> </div> <div class="form-group has-feedback"> <input type="password" name="password_confirmation" class="form-control" placeholder="Retype password"> <span class="glyphicon glyphicon-log-in form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-12 text-center"> <button type="button" id="submitForm" class="btn btn-primary btn-prime white btn-flat">Register</button> </div> </div> </form> </div> </div> </div> </div> </div> After done write register model code then write jquery ajax code for form submit Step : 3 jQuery Ajax Code For Form Submit We are open laravel register form in bootstrap model then we are write here form submit code into jquery ajax. simple copy followign code and past into script tag. <script type="text/javascript"> $('body').on('click', '#submitForm', function(){ var registerForm = $("#Register"); var formData = registerForm.serialize(); $( '#name-error' ).html( "" ); $( '#email-error' ).html( "" ); $( '#password-error' ).html( "" ); $.ajax({ url:'/register', type:'POST', data:formData, success:function(data) { console.log(data); if(data.errors) { if(data.errors.name){ $( '#name-error' ).html( data.errors.name[0] ); } if(data.errors.email){ $( '#email-error' ).html( data.errors.email[0] ); } if(data.errors.password){ $( '#password-error' ).html( data.errors.password[0] ); } } if(data.success) { $('#success-msg').removeClass('hide'); setInterval(function(){ $('#SignUp').modal('hide'); $('#success-msg').addClass('hide'); }, 3000); } }, }); }); </script> Step : 4 Overwrite register function Now, last and final step is overwrite your RegisterController.php's register function. so open your app/Http/Controllers/Auth/RegisterController.php file and put into it following code. namespace App\Http\Controllers\Auth; use App\User; use App\Http\Controllers\Controller; use Illuminate\Support\Facades\Validator; use Illuminate\Foundation\Auth\RegistersUsers; use Illuminate\Http\Request; use Response; class RegisterController extends Controller { /* |-------------------------------------------------------------------------- | Register Controller |-------------------------------------------------------------------------- | | This controller handles the registration of new users as well as their | validation and creation. By default this controller uses a trait to | provide this functionality without requiring any additional code. | */ use RegistersUsers; /** * Where to redirect users after registration. * * @var string */ protected $redirectTo = '/home'; /** * Create a new controller instance. * * @return void */ public function __construct() { $this->middleware('guest'); } public function register(Request $request) { $validator = Validator::make($request->all(), [ 'name' => 'required|max:255', 'email' => 'required|email|max:255|unique:users', 'password' => 'required|min:6|confirmed', ]); $input = $request->all(); if ($validator->passes()) { // Store your user in database return Response::json(['success' => '1']); } return Response::json(['errors' => $validator->errors()]); } } Now we are ready to run our example so run bellow command ro quick run: php artisan serve Now you can open bellow URL on your browser: http://localhost:8000 If you face any problem then please write a comment or give some suggestions for improvement. Thanks...
Show Image Preview Before Upload In jQuery Bootstrap Example
Today, Laravelcode share one helpfull tutorials about jquery and bootstrap. in this tutorials we are show you how to show image preview before upload. We are need some time this type functionality in frontend site which you want to show image preview before it upload in server. resently we are working on one laravel application and we are need this so we are make one simple script for it using jquery and bootstrap. and we are finaly done this with jquery and bootstrap. Here, we are always share our code and example which we are facing in our devloping mode and when we are find finaly solution about it the we are also share with you. You can try this example with bootstrap because we are using bootstrap for fine layout. Step : 1 HTML code look like <!DOCTYPE html> <html> <head> <title>Show Image Preview Before Upload</title> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2"> <div class="input-group image-preview"> <span class="input-group-btn"> <button type="button" class="btn btn-default image-preview-clear" style="display:none;"> <span class="glyphicon glyphicon-remove"></span> Clear </button> <div class="btn btn-default image-preview-input"> <span class="glyphicon glyphicon-folder-open"></span> <span class="image-preview-input-title">Browse</span> <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/> </div> </span> </div> </div> </div> </div> </body> </html> Step : 2 CSS code look like Then add some css code copy following code and add in your css file. .image-preview-input { position: relative; overflow: hidden; margin: 0px; color: #333; background-color: #fff; border-color: #ccc; } .image-preview-input input[type=file] { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); } .image-preview-input-title { margin-left:2px; } Step : 3 jQuery code look like [ADDCODE] The finaly add following jQuery code in js file. $(document).on('click', '#close-preview', function(){ $('.image-preview').popover('hide'); // Hover befor close the preview $('.image-preview').hover( function () { $('.image-preview').popover('show'); }, function () { $('.image-preview').popover('hide'); } ); }); $(function() { // Create the close button var closebtn = $('<button/>', { type:"button", text: 'x', id: 'close-preview', style: 'font-size: initial;', }); closebtn.attr("class","close pull-right"); // Set the popover default content $('.image-preview').popover({ trigger:'manual', html:true, title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML, content: "There's no image", placement:'bottom' }); // Clear event $('.image-preview-clear').click(function(){ $('.image-preview').attr("data-content","").popover('hide'); $('.image-preview-filename').val(""); $('.image-preview-clear').hide(); $('.image-preview-input input:file').val(""); $(".image-preview-input-title").text("Browse"); }); // Create the preview image $(".image-preview-input input:file").change(function (){ var img = $('<img/>', { id: 'dynamic', width:250, height:200 }); var file = this.files[0]; var reader = new FileReader(); // Set preview image into the popover data-content reader.onload = function (e) { $(".image-preview-input-title").text("Change"); $(".image-preview-clear").show(); $(".image-preview-filename").val(file.name); img.attr('src', e.target.result); $(".image-preview").attr("data-content",$(img)[0].outerHTML).popover("show"); } reader.readAsDataURL(file); }); }); Now we are ready to run our example so run bellow command ro quick run: If you face any problem then please write a comment or give some suggestions for improvement. Thanks...