Web前端入门（八）表单

Silver Star

已于 2022-05-19 22:17:44 修改

阅读量942

点赞数 3

分类专栏： Web前端文章标签：前端 html javascript

于 2022-05-19 22:10:40 首次发布

本文链接：https://blog.csdn.net/treesorshining/article/details/124872898

版权

Web前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

总目录

文章目录

1.表单的组成
2.表单域
3.表单控件（表单元素）

1.表单的组成

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。

2.表单域

表单域是一个包含表单元素的区域
<form></from>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

<form action="url地址" method="提交方式" name="表单域的名称"></form>

3.表单控件（表单元素）

3.1 input输入表单元素

input输入表单元素
input是个单标签，type 属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等)

常用的type属性的属性值及描述如下：

属性值	描述
button	定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)
checkbox	定义复选框
file	定义输入字段和"浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清楚表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

除 type 属性外，<input> 标签还有很多其他很多属性，其常用属性如下：

属性	属性值	描述
name	由用户自定义	定义 input 元素的名称
value	由用户自定义	规定 input 元素的值
checked	checked	规定此 input 元素首次加载时应当被选中
maxlength	正整数	规定输入字段中字符的最大长度

name 和 value 是每个表单元素都有的属性值，主要给后端人员使用。
name 是表单元素的名字，要求单选框和复选框要有相同的name值
checked 属性主要针对于单选框和复选框，主要作用是一打开页面，就可以默认选中某个表单元素

value属性

value 默认的文本值。有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。

用户名:<input type="text"  name="username" value="请输入用户名">

name属性

name表单的名字，这样，后台可以通过这个name属性找到这个表单。页面中的表单很多，name主要作用就是用于区别不同的表单。
name属性后面的值，是自己定义的。
radio 如果是一组，必须给它们命名相同的名字 name ，这样就可以多个选其中的一个

<input type="radio" name="sex" />男
<input type="radio" name="sex" />女

checked属性

表示默认选中状态。较常见于单选框和复选框，复选框可以有多个默认选中。

性别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女

maxlength属性

规定最多输入多少个字符

3.1.1 文本框与密码框

type 属性设置为 text 是文本框
type 属性设置为 password 是密码框

<body>
    <form>
        用户名：<input type="text"> <br/> 
        密码：<input type="password">
    </form>
</body>

3.1.2 单选框和复选框

type 属性设置为 radio 是单选框
type 属性设置为 checkbox 是复选框
name 是表单元素的名字，要求单选框和复选框要有相同的name值

<form>
        用户名：<input type="text"> <br> 
        密码：<input type="password"> <br> 
        <!-- radio是单选框，可以多个选一个 -->
        性别：男<input type="radio" name="sex"> 女 <input type="radio" name="sex">
        <!-- checkbox是多选框，可以多选 -->
        爱好：吃饭<input type="checkbox" name="hobbies">  睡觉<input type="checkbox" name="hobbies">   打游戏<input type="checkbox" name="hobbies"> 
</form>

3.1.3 submit和reset

type 属性设置为submit：提交按钮会把表单数据发送到服务器
type 属性设置为reset：重置按钮会清除表单中的所有数据

3.1.4 button和文件域

type 属性设置为button：是一个按钮
type 属性设置为file：是一个文件域，可以上传文件

<input type="button" value="获取短信验证码"> <br>
<!-- 文件域：上传文件使用的 -->
上传头像：<input type="file">

3.1.5 label

label标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验（例如，对于一个单选框设定label后，只要点击label里的文字，就会直接选中）
绑定元素
- 第一种用法就是用label标签直接包含input表单，适合单个表单选择
- 第二种用法 for 属性规定 label 与哪个表单元素绑定(通过id)。

<!-- 第一种 -->
<label> 男 
    <input type="radio" name="sex">   
</label>

<!-- 第二种 -->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">

3.2 select下拉表单元素

下拉表单元素
<select>中至少包含一对<option>
在<option>中定义 selected="selected" 时，当前项即为默认选中项

<select>
       <option selected="selected">选项1</option>
       <option>选项2</option>
       <option>选项3</option>
</select>

3.3 textarea文本域元素

用于定义多行文本输入的控件
textarea中间的内容是初始会显示在文本框中的内容

<textarea>
    文本内容
</textarea>

cols = “每行中的字符数” ， rows = “显示的行数”，在实际开发中不会使用，都是用CSS来改变大小

Silver Star

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端入门（八）表单

1.表单的组成在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。表单目的是为了收集用户信息。2.表单域表单域是一个包含表单元素的区域<form></from>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器属性属性值作用actionurl地址用于指定接收并处理表单数据的服务器程序的url地址methodget/post用于设置表单数据的提交方式，其取值为get或postnam
复制链接

扫一扫