How to set default value in html

HTML is Hypertext Markup Language, which is the basic language used to create web pages. A web page usually includes three languages: HTML, CSS and JavaScript. Among them, HTML is the most basic language, which is used to describe the text content, structure and layout of web pages.

When we design a web page, we sometimes need to set the default values ​​of some controls, such as input boxes, drop-down boxes, radio buttons, check boxes, etc. The default value of these controls is the value displayed by these controls when the user accesses the web page. If no default value is set, these controls are usually blank.

So, how to set the default value of a control in HTML? Next, let us find out together.

1. Setting the default value of the input box in HTML

In HTML, you can set the default value of the input box by setting the value attribute in the tag. For example:

<input type="text" name="username" value="admin">

In the above code, the name attribute indicates that the name of the input box is "username", and the value attribute indicates that the default value of the input box is "admin".

2. Setting the default value of the drop-down box in HTML

In HTML, you can set the default value of the drop-down box by setting the selected attribute in the tag. For example:

<select name="fruit">
    <option value="apple" selected>Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
</select>

In the above code, the first

tag has the selected attribute set, indicating that the "Apple" option is selected by default.

3. Setting the default values ​​of radio buttons and check boxes in HTML

The default values ​​of radio buttons and check boxes can be set by setting the checked attribute in the

tag to fulfill. For example:

<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female

<input type="checkbox" name="hobby" value="reading" checked> Reading
<input type="checkbox" name="hobby" value="traveling" checked> Traveling
<input type="checkbox" name="hobby" value="sports"> Sports

In the above code, the first radio button and the first two check boxes have the checked attribute set, indicating that they are selected by default. Note that the name attributes of the radio button and check box must be the same, otherwise they will not be in the same option group.

4. Setting the default value of the text area in HTML

The text area is a multi-line input box, and its default value can be achieved by setting the text content in the tag. . For example: </p> <pre class="brush:php;toolbar:false"><textarea name="description">This is a description.</textarea></pre> <p>In the above code, the default value of the text field is "This is a description.". </p> <p>Summary</p> <p>Through the above method, we can set the default value of the control in HTML, so that when the user accesses the web page, these controls will display the value we set by default. This can facilitate users and improve user experience. </p> <p>It should be noted that setting default values ​​does not mean that users must enter these values. Users can still modify the values ​​of these controls at will. </p><p>The above is the detailed content of How to set default value in html. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Explore how to convert DOCX files to HTML" href="http://m.php.cn/faq/523890.html">Explore how to convert DOCX files to HTML</a></span><span>Next article：<a class="dBlack" title="Explore how to convert DOCX files to HTML" href="http://m.php.cn/faq/523894.html">Explore how to convert DOCX files to HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/402895.html" title="Problem in passing value from parent component to child component echarts in Vue" class="aBlack">Problem in passing value from parent component to child component echarts in Vue</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/402896.html" title="Some thoughts on React this binding" class="aBlack">Some thoughts on React this binding</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/402897.html" title="Django uses request to get the parameters sent by the browser" class="aBlack">Django uses request to get the parameters sent by the browser</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/402898.html" title="DOM operation in JQuery - wrap" class="aBlack">DOM operation in JQuery - wrap</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/402899.html" title="Explanation of related content of prototype and prototype chain" class="aBlack">Explanation of related content of prototype and prototype chain</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai" >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>