Web全栈~02.表单样式设计

川长思鸟来 2023-01-02 03:24 218阅读 0赞

# Web基本笔记~02.表单样式设计 #

## [上一期][Link 1] ##

### 表单的介绍 ###

表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个 Html 文档中，当用户填写完信息后做submit操作，表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。

表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

在这一期只设计表单样式,表单的具体功能后面才会慢慢知道。

<form action＝"url" method="post" name="my" ></form>
    -name：表单提交时的名称
    -action：提交到的地址(如: www.baidu.com)
    -method：提交方式，有 get 和 post 两种，默认为 get

### 文本框 ###

文本域通过< input type="text" > 标签来设定，当用户要在表单中键入字母、数字等 内容时，就会用到文本域。当 type = password时,则多用于密码域

### 单选按钮 ###

< input type="radio" > 标签定义了表单单选框选项。但是要注意必须要两个或者多个input的name一样才能实现单选的效果

### 复选框 ###

定义了复选框. 用户需要从若干给定的选择中选取一个 或若干选项。

### 文件 ###

定义文件选择字段和 "浏览..." 按钮，供文件上传

选择一个文件: <input type="file" name="img">

### 隐藏域 ###

定义隐藏字段，隐藏字段对于用户是不可见的。隐藏字段常常存储默认值，或者由 JavaScript 改变它们的值

### 重置按钮 ###

定义重置按钮（重置所有表单值为默认值）

### 图像图片按钮 ###

定义图像作为提交按钮

### 下拉列表 ###

< select > 元素用来创建下拉列表。 < option > 标签定义下拉列表中的一个选项（一个条目）。

< optgroup > 标签经常用于把相关的选项组合在一起

### 多行文本框 ###

< textarea > 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本。 可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

<textarea rows="10" cols="30"> 
    	多行文本框
    </textarea>

### labe ###

< label > 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您 在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会 自动将焦点转到和标签相关的表单控件上。 < label > 标签的 for 属性应当与相关元素的 id 属性相同

[Link 1]: https://blog.csdn.net/qq_41424688/article/details/112002453