标签：代码 示例 标签 day4 之路 表单 HTML 前端 属性
文章目录
HTML
今天继续来学习HTML的常用标签，坚持今天一天，明天开始CSS部分。加油~
提示：以下是本篇文章正文内容，下面案例可供参考
一、HTML标签-表单
表单是用来收集用户的信息。表单元素是网页中提供用户进行输入或点击的小控件。一个完整的表单通常由表单域、提示信息，表单控件。
表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的url地址，及数据交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到服务器。
提示信息：一些说明性的文字。
表单控件：具体表单功能。
1.表单域
form，功能性标签，双标签，容器级。
action属性，url属性值，指定接收并处理表单数据的服务器程序和url地址。
method属性，get、post属性值。
name属性，自定义名称。
代码如下（示例）：
<form action="data.php" method="GET" name="first">
</form>
2.表单元素
（1）input标签，单标签。
属性类型与属性值：
type属性的属性值不同决定了input标签的形态不同。value属性定义默认的输入文字。checked属性如果不设置表示默认没有选中。
1）单行文本输入框，text。提供用户单行文本的输入。
代码如下（示例）：
用户名：<input type="text" value="请输入您的用户名">
2）密码输入框，password。提供用户输入的密码框。
代码如下（示例）：
密码：<input type="password" value="请输入密码">
3）单选框，radio。提供用户点击选择的单选框。会成组出现。同一组单选框之间必须是互斥的的关系，通过设置相同的name属性实现。
代码如下（示例）：
性别：<input type="radio" name="sex">男
<input type="radio" name="sex">女
4）复选框，checkbox。提供用户点击选择的复选框。设置相同的name属性时进行分组使用。
代码如下（示例）：
爱好：
<input type="checkbox" name="hobby">绘画
<input type="checkbox" name="hobby">书法
<input type="checkbox" name="hobby">代码
5）按钮，四种形式的按钮。
代码如下（示例）：
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
<input type="image" src="images/gai.jpg">
6）文件上传按钮
文件上传按钮，file，可以提供用户选择本地文件进行上传服务器。
代码如下（示例）：
文件<input type="file" multiple="multiple">
3.文本域
文本域，textarea，双标签。
rows属性，行，文本框显示的最大行数，如果超过行数会被隐藏并且出现滚动条。
cols属性，列，数字是几显示每一行显示的最大字节数（一个汉字按两个字节算）。
代码如下（示例）：
自我介绍：
<textarea cols="30" rows="10">请书写一个两百字的自我介绍
</textarea>
4.下拉菜单
下拉菜单提前设置的一些选项，用户可通过点击选择其中的一项。
select，定义下拉菜单的整体结构。option，定义下拉菜单的每一项。嵌套关系。option可以设置selected作为默认选中项。
optgroup标签对选项进行分组，双标签。嵌套关系：select>optgroup>option。属性label，可以进行自定义一个组名。
代码如下（示例）：
城市：
<select>
<optgroup label="国内">
<option >北京</option>
<option selected="selected">上海</option>
<option >广州</option>
</optgroup>
<optgroup label="国外">
<option >伦敦</option>
<option selected="selected">纽约</option>
<option >东京</option>
</optgroup>
</select>
5.label标签
帮表单元素定义标注。
绑定方法一：
（1）给表单元素设置id属性。
（2）将需要绑定的其他内容用label包裹。
（3）设置for属性属性值与绑定的表单元素的属性值相同。
代码如下（示例）：
<input type="radio" name="sex" checked="checked" id="nan">
<label for="nan">男</label>
绑定方法二：（在绑定内容与表单元素在一起的时候才能使用）
（1）给表单元素设置id属性。
（2）将需要绑定的其他内容用label包裹。
（3）设置for属性属性值与绑定的表单元素的属性值相同。
代码如下（示例）：
<label><input type="checkbox" name="hobby">绘画</label>
二、字符实体
在普通文字书写时，有一些特殊符号不能直接书写，例如<>
通过查询w3cshool手册，查看所有的字符实体.
很多特殊符号，自己去找找吧。
规则：所有的字符实体编号都是以&开头，以；结尾。对大小写敏感！
总结
今天就学习到这里啦！今天主要学习了form表单，今天把HTML部分常用的标签全部都学完了，HTML也告一段落。明天开始学习css了，执着于理想，纯粹于当下。加油~
标签：代码,示例,标签,day4,之路,表单,HTML,前端,属性 来源： https://blog.csdn.net/qq_46492364/article/details/114451221
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。