一、表单是什么
简单来说表单就是用来收集用户输入信息的元素。
它由一组表单控件组成，可以包括文本字段、复选框、单选按钮、下拉菜单等。用户通常可以在表单中输入数据、选择选项，然后将数据提交到服务器进行处理。表单的提交可以通过点击提交按钮或者按下回车键来触发。服务器接收到表单提交的数据后，可以进行进一步的处理，例如保存数据或者生成动态页面。
二、表单组成
组成：表单域：包含表单元素的区域，（相当于整个大的表单）
表单控件（表单元素）：框和按钮
提示信息：提示，比如身高，年龄
三、表单结构
由<form></form>标签包裹起来
<form action=""></form> <form action="demo.php" method="post" name="name1">
<!-- action="demo.php" 提交到哪里 method="post/get（不会显示到浏览器上方）" 提交方式 name-->
<input type="text" />
<!-- 表单控件：input（输入），
type="text"属性值
（text（文本），button（按钮）,checkbox（复选框），
file（输入字段和浏览按钮，供文件上传）
hidden（隐藏），image（图像），radio（单选按钮），
reset（重置按钮），submit（提交按钮）.....
name="username"
name 是表单元素名字，性别单选按钮必须要有相同的名字才可以实现多选1
value="请输入用户名"
-->
</form>四、input标签
1.案例
<h2>input标签</h2>
<!-- maxlength="6"最大长度 -->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="6" /><br />
密码：<input type="password" name="pwd" /><br />
<!-- 单选按钮和复选按钮可以设置checked属性，当页面打开的时候就可以默认选中这个按钮 -->
<!-- 当name一致时才能实现单选 -->
性别：男<input type="radio" name="xb" value="男" checked="checked" />
女<input type="radio" name="xb" value="女" /><br />
爱好：吃饭<input type="checkbox" name="hobby" value="吃饭" />
睡觉<input type="checkbox" name="hobby" value="睡觉" />
打豆豆<input type="checkbox" name="hobby" value="打豆豆" /><br />
<!-- 提交到某个服务器 -->
<input type="submit" value="免费注册" /><br />
<!-- 重置按钮可以还原最初的样子 -->
<input type="reset" value="重新填写" /><br />
<!-- 普通按钮，后续搭配js配合使用 -->
<input type="button" value="获取短信验证码" /><br />
<!-- 文件域 使用场景 上传文件使用 -->
上传头像：<input type="file" /><br />-
2.知识点
-
<input> 标签是 HTML 中最常用的标签之一，用于创建一个用于用户输入的表单控件。
以下是一些<input> 标签的常见属性和用法：
-
type 属性：指定输入框的类型，比如：
type="text"：创建一个文本输入框，用户可以在其中输入文本信息。type="password"：创建一个密码输入框，用户输入的文本内容将被隐藏。type="radio"：创建一个单选按钮，用户只能选择其中的一个选项。type="checkbox"：创建一个复选框，用户可以选择其中的多个选项。type="submit"：创建一个提交按钮，用户点击后将提交表单数据。type="reset"：创建一个重置按钮，用户点击后将重置表单中的所有字段。type="button"：创建一个普通按钮，可与 JavaScript 配合使用来执行自定义操作。type="file"：创建一个文件上传字段，允许用户选择并上传文件。
-
name 属性：这是指定输入字段名称的属性。它在提交表单时用于标识不同字段的值。
-
注意：在需要单选的时候，同一个选项内容的name值应该一样，比如例子中的性别的“男”和“女”
-
-
-
-
checked属性：这是指定单选按钮或复选框是否被选中的属性。在给定的代码中，"男"这个单选按钮在页面加载时被默认选中。 -
-
value 属性：这是指定输入字段的默认值的属性。在给定的代码中，用户名字段和单选按钮都有预设的默认值。
-
placeholder 属性：指定输入框中的提示文本，在用户没有输入时显示。
-
required 属性：指定输入框是否为必填字段，如果设置为 true，则用户必须填写该字段才可以提交表单。
-
min 和 max 属性：用于指定输入框的最小值和最大值，通常在类型为 number 或 date 的输入框中使用。
-
disabled 属性：指定输入框是否禁用，禁用的输入框无法进行编辑。
-
3.效果图
-
-
五、label标签
-
1.案例
-
<h2>label标签</h2> <!-- 用于绑定一个表单元素，当点击标签内文本时，浏览器就会自动将焦点转到对应的表单元素上，用来增加用户体验 --> <!-- id 和for名字相同 --> <!-- label放内容（文字） --> <label for="text">用户名：</label><input type="text" id="text" /> <input type="radio" name="sex" id="nan" /><label for="nan">男</label> <input type="radio" name="sex" id="nv" /><label for="nv">女</label>2.知识点
-
标签的语法：在大多数编程语言中，标签通常以一个标识符开头，后跟一个冒号，如：
label_name:。 -
标签的作用：标签可以用于标记循环、条件语句、函数、代码块等，以便于在程序中跳转到指定的位置。
-
标签的跳转：使用标签进行跳转通常有两种方式：跳转到标签处（通常使用
goto语句）和跳出标签所在的循环（使用break语句）。 -
标签的嵌套：在一些编程语言中，可以在代码中嵌套使用标签，这样可以实现更复杂的跳转逻辑。
-
标签的应用：标签广泛应用于处理复杂逻辑的代码，如多重循环、异常处理、状态机等。
-
3.效果图
-
六、select标签
- 1.案例
-
<h2>select下拉表单</h2> 籍贯： <select name="" id=""> <option value="">山东</option> <option value="">北京</option> <!-- selected="selected"默认 --> <option value="" selected="selected">火星</option> </select>2.知识点
-
<select> 标签是 HTML 的元素，用于创建选择框（下拉列表）。
<select> 元素中包含的 <option> 元素定义了下拉列表中的选项。
常见的属性有：
- name: 定义选择框的名称
- size: 定义选择框的可见行数
- multiple: 定义是否允许多选
- disabled: 定义是否禁用选择框
- required: 定义是否必选
- 3.效果图
- 七、textarea标签
- 1.案例
-
<h2>textarea文本域标签</h2> 今日反馈： <!-- cols="30" 一行多少字 rows="10"显示多少行 --> <!-- 文字可以挨着标签写，这样不会有前面的空格 --> <textarea name="" id="" cols="30" rows="10"> 希望能学好 </textarea> - 2.知识点
-
<textarea> 是一个 HTML 标签，用于在网页中创建一个可编辑的文本区域。它可以用于接收用户输入的多行文本，比如评论框、消息输入框等。
<textarea> 标签可以通过设置属性来定义文本区域的大小、默认文本内容、是否可调整大小等。常见的属性有：
- rows: 指定文本区域的行数。
- cols: 指定文本区域的列数。
- placeholder: 在文本区域为空时显示的默认文本。
- readonly: 指定文本区域是否只读。
- disabled: 指定文本区域是否禁用。
- 3.效果图
-
八、综合案例
-
<h1>综合案例</h1> <table width="500"> <!-- 第一行 --> <tr> <td>性别</td> <td> <input type="radio" name="sex" id="nan1" /><label for="nan1"><img src="" alt="图" />男 </label> <input type="radio" name="sex" id="nv1" /><label for="nv1"><img src="" alt="图" />女 </label> </td> </tr> <!-- 第二行 --> <tr> <td>生日</td> <td> <select name="" id=""> <option value="">--请选择年份--</option> <option value="">2001</option> <option value="">2002</option> <option value="">2003</option> <option value="">2004</option> </select> <select name="" id=""> <option value="">--请选择月份--</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> </select> <select name="" id=""> <option value="">--请选择日--</option> <option value="">1</option> <option value="">2</option> <option value="">3</option> <option value="">4</option> </select> </td> </tr> <!-- 第三行 --> <tr> <td>所在地区</td> <td><input type="text" value="北京" /></td> </tr> <!-- 第四行 --> <tr> <td>婚姻状况</td> <td> <input type="radio" name="marry" checked="checked" />未婚 <input type="radio" name="marry" />已婚 <input type="radio" name="marry" />离婚 </td> </tr> <!-- 第五行 --> <tr> <td>学历</td> <td><input type="text" value="博士后" /></td> </tr> <!-- 第六行 --> <tr> <td>喜欢好</td> <td> <input type="checkbox" name="love" />打篮球 <input type="checkbox" name="love" />跑步 <input type="checkbox" name="love" />打羽毛球 <input type="checkbox" name="love" checked="checked" />都喜欢 </td> </tr> <!-- 第七行 --> <tr> <td>个人介绍</td> <td> <textarea name="" id="" cols="30" rows="10">自我介绍</textarea> </td> </tr> <!-- 第八行 --> <tr> <td></td> <td><input type="submit" value="免费注册" /></td> </tr> <!-- 第九行 --> <tr> <td></td> <td></td> </tr> <!-- 第十行 --> <tr> <td></td> <td> <input type="checkbox" checked="checked" />我同意注册条款和加入会员标准 </td> </tr> <!-- 第十行 --> <tr> <td></td> <td><a href="">我是会员，立即登录</a></td> </tr> <!-- 第十一行 --> <tr> <td></td> <td> <h5>我承诺</h5> <ul> <li>将让快乐常伴吾身</li> <li>勤奋学习永不止步</li> </ul> </td> </tr> </table>效果图
-
扫一扫
788
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
