HTML表单基础（掌握）-技術動態-匯編語言學習筆記

HTML表单基础（掌握）

2023-09-07 阅读 16 评论 0

摘要：文章目录1. input控件(重点)2.label标签(理解)3.文本域textarea4.下拉菜单5.表单域现实中的表单，类似我们去银行办理信用卡填写的单子。目的是为了手机用户信息。在网页当中，也需要跟用户进行交互，收集用户资料，此时也是需要填写表单的。在HTM

文章目录

- - 1. input控件(重点)
  - 2.label标签(理解)
  - 3.文本域textarea
  - 4.下拉菜单
  - 5.表单域

现实中的表单，类似我们去银行办理信用卡填写的单子。目的是为了手机用户信息。在网页当中，也需要跟用户进行交互，收集用户资料，此时也是需要填写表单的。

在HTML中，一个完整的表单通常是由：表单控件(也称为表单元素)、提示信息、表单域3个部分构成。

表单控件：包含了具体的表单功能项，如：单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：一个表单中通常需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：相当于是一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的URL地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

1. input控件(重点)

<input /> 标签是一个单标签，type属性是其基本属性，该属性的取值有多种，用于指定不同的控件类型。除了type属性之外，还有其他常用属性如下所示：

属性	属性值	描述
type	text	单行文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选按钮
	button	普通按钮
	submit	提交按钮
	reset	重置按钮
	image	图像形式的提交按钮
	file	文件域
name	由用户自定义	控件名称
value	由用户自定义	input控件中默认的文本值
size	正整数	input控件在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数

代码示例1：文本输入框与密码输入框

<p>用户名： <input type="text" value="请输入您的姓名" /></p> <!-- 这个value会默认显示在文本输入框中, 类似淘宝的搜索框 --> 
<p>密&nbsp;码： <input type="password" /></p>

html如何制作表单、代码示例2：实现一个选择性别的单选按钮

<p>性 别： <input type="radio" name="sex" />女<input type="radio" name="sex" />男
</p>

注意：上例当中，实现性别的单选按钮时，男或女只能选择其中一个，此时使用相同的name值来将男和女的选择划分为一组，要么选男要么选女。如果name值不同，就可以同时选择。

代码示例3：复选框，可以同时选择多个

<p>爱好：<input type="checkbox" />足球<input type="checkbox" />篮球<input type="checkbox" />羽毛球	<input type="checkbox" />乒乓球
</p>

代码示例4：默认被选中的表单属性，一开始就默认选中：女

<p>性 别： <input type="radio" name="sex" checked="checked" />女<input type="radio" name="sex" />男
</p>

代码示例5：普通按钮、提交按钮、重置按钮

<p><input type="button" value="搜索" /></p>  <!--普通按钮:按钮上面显示的是value值-->
<p> <input type="submit" value="提交表单" /> </p>  <!-- 提交按钮：如果不添加value属性，按钮上显示的是提交 -->
<p> <input type="reset" value="重置表单" /> </p>  <!-- 重置按钮：不添加value属性时，按钮上现实的是重置 -->

示例6：图片按钮

<p> <input type="image" src="login.jpg" /></p>

css表单？示例7：文件按钮：上传头像时的选择文件按钮

<p> 上传头像：<input type="file" /> </p>

示例8：maxlength

<p>密&nbsp;码： <input type="password" maxlength="6" /></p>

示例9：value属性

2.label标签(理解)

label标签是input元素定义标注（标签）。

作用：用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点

如何绑定元素？：for属性规定label与哪个表单元素绑定。

掌握基础，只有一个表单控件时可以直接使用label标签将input控件进行包裹
```
<label>输入账号：<input type="text" /> </label> 
```
2.如果label里面有多个表单，想要定位到某个，可以通过for id 的格式进行,以下案例当点击前面的输入账号四个字时，会自动定位到输入密码的密码输入框。
```
<label for="password">输入账号：<input type="text" id="zhanghao" />输入密码：<input type="password" id="password" />
</label>
```

3.文本域textarea

如果需要输入大量的信息，就需要用到<textarea></textarea> 标签。通过textarea控件可以轻松的创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">文本内容
</textarea>

这个文本域中的两个结构属性一般不用，他们的样式使用CSS来做。

4.下拉菜单

使用select控件来定义下拉菜单的基本语法格式如下：

<select><option>选项1</option><option>选项2</option><option>选项3</option>...
</select>

select标签中至少应该包含一对option标签
在option中定义selected="selected" 时，表示当前项即为默认选中项。

代码示例：选取你的籍贯和城市

籍贯<select><option>选择你的籍贯</option><option>上海</option><option>广州</option><option>深圳</option><option selected="selected">北京</option></select><select><option>选择你的城市</option><option>海淀</option><option>昌平</option><option>大兴</option></select>

5.表单域

基础题。在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法如下：

<form action="url地址" method="提交方式" name="表单名称" />上面学习的各种控件都写在这里面，相当于所有的用户信息都用form包起来一并提交
</form>

常用属性：

action在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器的URL地址
method用于设置表单数据的提交方式，其取值为get或post。get提交速度比较快，但是不安全，会显示出你输入的内容（密码也会显示出来），不能做密码提交；post提交速度慢一些，但是比较安全，用户输入的数据（即，表单中的内容）不会显示
```
<form action="demo.php" method="get" /><p>用户名: <input type="text" name="un" /> </p><p>密&nbsp;码: <input type="password" name="pwd" /> </p><p> <input type="submit" value="提交" /></p><p> <input type="reset" value="重置" /></p>
</form>
```

name用于指定表单的名称，以区分同一个页面中的多个表单。

<form action="demo.php" method="get" name="login" /><p>用户名: <input type="text" name="un" /> </p><p>密&nbsp;码: <input type="password" name="pwd" /> </p><p> <input type="submit" value="提交" /></p><p> <input type="reset" value="重置" /></p>
</form>
<form action="demo.php" method="get" name="register" /><p>用户名: <input type="text" name="un" /> </p><p>密&nbsp;码: <input type="password" name="pwd" /> </p><p> <input type="submit" value="提交" /></p><p> <input type="reset" value="重置" /></p>
</form>