概述
实验环境：
VS Code
Windouws10
Notes:
E:学习资料笔记HTML作业表单控件HTML1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单控件</title>
<link rel="stylesheet" href="E:学习资料笔记HTML作业表单控件CSS1.css">
</head>
<body>
<form action="">
<!--<form> 标签用于创建供用户输入的 HTML 表单;
而action 属性规定当提交表单时，向何处发送表单数据。
其语法为：<form action="URL">-->
<table>
<caption>
请输入您的注册信息：
</caption>
<!--<caption> 标签定义表格的标题。
<caption> 标签必须直接放置到 <table> 标签之后。
您只能对每个表格定义一个标题。
提示：通常这个标题会被居中于表格之上。
然而，CSS 属性 "text-align" 和 "caption-side" 能用来设置标题的对齐方式和显示位置-->
<tr>
<td class="left">
<!--作用：定义 HTML 表格中的标准单元格
说明：HTML 表格有两类单元格：表头单元 - 包含头部信息（由 th 元素创建）标准单元 -
包含数据（由 td 元素创建）td 元素中的文本一般显示为正常字体且左对齐。
注释：可以使用 colspan 和 rowspan 属性来实现内容横跨多个行或列
故，td代表表格的列，class="left"是该列使用类选择器，名为left的样式-->
用户名：
</td>
<td class="right">
<input type="text" id="username" />
<!--<input> 标签规定了用户可以在其中输入数据的输入字段。
<input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。
输入字段可通过多种方式改变，取决于 type 属性。-->
</td>
</tr>
<tr>
<td class="left">
密码：
</td>
<td class="right">
<input type="password" id="pwd"/> <!--password 定义密码字段（字段中的字符会被遮蔽）(属于type的属性值)-->
</td> <!--id 规定元素的唯一 id。
命名规则：
必须以字母 A-Z 或 a-z 开头
其后的字符：字母(A-Za-z)、数字(0-9)、连字符("-")、下划线("_")、冒号(":") 以及点号(".")
值对大小写敏感-->
</tr>
<tr>
<td class="left">
确认密码：
</td>
<td class="right">
<input type="password" id="repwd"/>
</td>
</tr>
<tr>
<td class="left">
验证码：
</td>
<td class="right">
<input type="number" id="1234"/>
</td>
</tr>
<tr>
<td class="left">
年龄：
</td>
<td class="right">
<input type="text" id="age"/> <!--text 默认。定义一个单行的文本字段（默认宽度为 20 个字符）(属于type的属性值)。-->
</td>
</tr>
<tr>
<td class="left" style="padding-top: 13px;">
性别：
</td> <!--name 属性规定 <input> 元素的名称。-->
<td class="right" style="padding-top: 13px;"> <!--style 属性规定元素的行内样式；
padding-top属性设置一个元素的顶部填充（空格)(属于CSS语言)-->
<input type="radio" name="sex" id="sex"/>BOY <!--转义字符 表示1个空格-->
<input type="radio" name="sex" id="sex"/>Girl
</td> <!--radio 定义单选按钮(属于type的属性值)。-->
</tr>
<tr>
<td class="left" style="padding-top: 13px;">
运动项目：
</td>
<td class="right" style="padding-top: 13px;"> <!--checkbox 定义复选框。(属于type的属性值)。-->
<input type="checkbox" name="hobbit" id="hobbit"/>跑步
<input type="checkbox" name="hobbit" id="hobbit"/>游泳
<input type="checkbox" name="hobbit" id="hobbit"/>骑车
<input type="checkbox" name="hobbit" id="hobbit"/>马拉松
<input type="checkbox" name="hobbit" id="hobbit"/>跳高
</td>
</tr>
<tr>
<td class="left" style="padding-top: 13px;">
所在省份：
</td>
<td class="right" style="padding-top: 13px;">
<select name="province" id="province"> <!--<select> 元素用来创建下拉列表。<select> 元素中的 <option> 标签定义了列表中的可用选项。
提示：<select> 元素是一种表单控件，可用于在表单中接受用户输入。
name 属性规定下拉列表的名称; 语法为：<select name="text">-->
<option value="">--请选择--</option> <!--<option> 标签定义下拉列表中的一个选项（一个条目）。
value 属性规定在表单被提交时被发送到服务器的值。
注意：如果没有规定 value 属性，选项的值将设置为 <option> 标签中的内容。
语法：<option value=" ">-->
<option value="江西省"> 江西省</option>
<option value="福建省"> 福建省</option>
<option value="广东省"> 广东省</option>
<option value="浙江省"> 浙江省</option>
<option value="香港省"> 香港省</option>
<option value="澳门省"> 澳门省</option>
<option value="上海省"> 上海省</option>
<option value="其他"> 其他</option>
</select>
</td>
</tr>
<tr>
<td class="left" style="padding-top: 13px;">
所在城市：
</td>
<td class="right" style="padding-top: 13px;">
<select name="city" id="city">
<option value="">--请选择--</option>
<option value="南昌市"> 南昌市</option>
<option value="抚州市"> 抚州市</option>
<option value="福州市"> 福州市</option>
<option value="厦门市"> 厦门市</option>
<option value="泉州市"> 泉州市</option>
<option value="南通市"> 漳州市</option>
<option value="元朗市"> 元朗市</option>
<option value="深圳市"> 深圳市</option>
<option value="汕头市"> 汕头市</option>
</select>
</td>
</tr>
<tr>
<td class="left" style="padding-top: 13px;vertical-align: top;">
个人简介：
</td><!--<textarea> 标签定义一个多行的文本输入控件。-->
<td class="right" style="padding-top: 13px;">
<textarea name="" id="" cols="46" rows="7"> 请输入您的不小于50字的个人简介。。
</textarea> <!--cols 属性规定文本区域的可见宽度。语法：<textarea cols="number">
rows 属性规定文本区域的可见高度，以行数计。语法：<textarea rows="number">
注意： textarea 的尺寸大小也可以通过 CSS 的 height 和 width 属性设置。-->
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 25px; padding-left: 70px;" >
<!--colspan 属性定义单元格应该横跨的列数。语法：<td colspan="number">
其中number规定单元格应该横跨的列数。注意： colspan="0" 告知浏览器使单元格横跨到列组 (colgroup) 的最后一列。-->
<input type="submit" value="注册" class="anniu"> <!--submit 定义提交按钮(属于type的属性值)-->
<input type="reset" value="清空" class="anniu"> <!--reset 定义重置按钮（重置所有的表单值为默认值）(属于type的属性值)。-->
</td>
</tr>
</table>
</form>
</body>
</html>
作用：用于搜集用户输入信息。
说明：根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
注释：在 HTML 中， 标签没有结束标签。在 XHTML 中， 标签必须被正确地关闭。
input的用法
input type 属性
style属性
option标签
textarea标签
在html代码中，使用转义字符 表示1个空格，而使用转义字符&表示 &。
1、在html代码中 和空格的区别：
在html代码中每输入一个转义字符 就表示一个空格，输入十个 ，页面中就显示10个空格位置。
而在html代码中输入空格，不管输入多少个空格，最终在页面中显示的空格位置只有一个。
例如：hmtl代码中，在两个字之间输入十个空格与输入十个转义字符 的效果对比。2、在html代码中，&和空格的区别
html中的转义字符&表示&字符，而空格表示的就是一个空格。在很多网站上编辑文字时，如果需要输入html中的一些转移字符，可能就需要用到&来转换。
例如：需要在页面中显示出转义字符 ，而在html代码中直接这么输入，页面中显示出来的是一个空格而不是 。这就需要先将字符&通过转义字符&表示出来，然后在它后面输入nbsp即可。
具体如下：
E:学习资料笔记HTML作业表单控件CSS1.css
table{
margin: 0 auto;
margin-top: 50px;
width: 500px;
}
table caption{
text-align: left;
font-weight: bolder;
font-family: 宋体;
font-size: 25px;
color: darkred;
margin-bottom: 20px;
}
.left{
width: 100px;
padding-top: 8px;
color: darkorchid;
font-family: 楷体;
}
.right{
width: 400px;
padding-top: 8px;
color: black;
font-family: 楷体;
}
textarea{
border-radius: 6px;
}
.anniu{
background-color: papayawhip;
font-family: 隶书;
width: 80px;
height: 40px;
font-size: 18px;
color: blue;
border-radius: 68px;
}
效果截图：
最后
以上就是谦让铃铛为你收集整理的vscode实验报告：表单控件的全部内容，希望文章能够帮你解决vscode实验报告：表单控件所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复