CSS—表单

表单域是一个包含表单元素的区域&＃xff0c;在HTML标签中&＃xff0c;标签用于定义表单域&＃xff0c;以实现用户信息的收集和传递。会把它范围内的表单元素信息提交给服务器。

"url地址" method&＃61;"提交方式" name&＃61;"表单域名称">各种表单元素控件



在表单域中可以定义各种表单元素&＃xff0c;这些表单元素就是允许用户在表单中输入或选择的内容控件。

• input输入表单元素
• select下拉表单元素
• textarea文本域元素

&＃xff08;1&＃xff09;
在标签中&＃xff0c;包含一个type属性&＃xff0c;根据不同的type属性值&＃xff0c;输入字段拥有很多形式&＃xff08;文本、复选框、掩码后的文本控件、单选按钮、按钮等&＃xff09;

"属性值" />


input标签为单标签&＃xff0c;type属性设置不同的属性值用来指定不同的控件类型&＃xff1a;

除type属性外&＃xff0c;标签还有其他很多属性&＃xff1a;

radio必须有name属性才可以实现多选一。



标签为input元素定义标签
标签用于绑定一个表单元素&＃xff0c;当点击标签内的文本时&＃xff0c;浏览器就会自动将焦点转到或者选择对应的表单元素上&＃xff0c;用来增加用户体验&＃xff1a;

"sex">男
"radio" name&＃61;"sex" id&＃61;"sex"/>


核心标签的for属性应当与相关元素的id属性相同。

&＃xff08;2&＃xff09;
使用场景&＃xff1a;在页面中&＃xff0c;如果有多个选择让用户选择&＃xff0c;并且想要节约页面空间时&＃xff0c;我们可以使用标签控件定义下拉列表。

山东北京天津杭州



中至少包含一对&＃xff0c;在中定义selected&＃61;"selected"时&＃xff0c;当前项即为默认选中项。

&＃xff08;3&＃xff09;</strong><br /> 使用场景&＃xff1a;当用户输入内容较多时&＃xff0c;我们就不能使用文本框表单了&＃xff0c;此时我们可以使用<textarea>标签&＃xff0c;在表单元素中&＃xff0c;<textarea>标签是用于定义多行文本输入的控件。</p><p><code class="prism language-css"><textarea rows&＃61;<span class="token string">"3"</span> cols&＃61;<span class="token string">"20"</span>>I love u&＃xff0c;默认文字<br>

通过标签可以轻松地创建多行文本输入框,cols&＃61;“每行中字符数”,rows&＃61;“显示的行数”,我们在实际开发中不会使用&＃xff0c;都是用CSS来改变大小。</p></div></div> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/css" target="_blank" title="css">css</a></li> <li><a href="https://www.php1.cn/tag/html" target="_blank" title="html">html</a></li> <li><a href="https://www.php1.cn/tag/服务器" target="_blank" title="服务器">服务器</a></li> <li><a href="https://www.php1.cn/tag/io" target="_blank" title="io">io</a></li> <li><a href="https://www.php1.cn/tag/get" target="_blank" title="get">get</a></li> <li><a href="https://www.php1.cn/tag/post" target="_blank" title="post">post</a></li> <li><a href="https://www.php1.cn/tag/input" target="_blank" title="input">input</a></li> <li><a href="https://www.php1.cn/tag/select" target="_blank" title="select">select</a></li> <li><a href="https://www.php1.cn/tag/text" target="_blank" title="text">text</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了

会员登录 | 用户注册