【JavaWeb】表单标签案例&CSS（24）_web表单标签例子-CSDN博客

本文详细介绍HTML表单元素的使用，包括输入框、下拉列表、文本域等，并讲解CSS的基本概念及如何通过不同方式将CSS与HTML结合，实现网页内容与表现的分离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

距离开学还有32天；
心旷神怡；

Form表单标签

Form

标签用于为用户输入创建 HTML 表单。我们以下面的静态注册页面中所需要的标签展开来介绍； ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200729193141703.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FscGhhX3hpYQ==,size_16,color_FFFFFF,t_70)

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <form >
    <table border="1" width="500px" align="center" cellspacing="0" >
      <tr>
        <td><label for="username" >用户名:</label></td>
        <td><input type="text" id="username" name="username"></td>
      </tr>
      <tr>
        <td><label for="password">密&nbsp;&nbsp;&nbsp;码:</label></td>
        <td><input type="password" id="password" name="password"></td>
      </tr>
      <tr>
        <td>性别</td>
<!--        单选-->
        <td><input type="radio" name="gender" value="male">男
          <input type="radio" name="gender" value="female">女</td>
      </tr>
      <tr>
        <td>性别</td>
<!--        多选-->
        <td><input type="checkbox" name="hobby">吃饭
          <input type="checkbox" name="hobby">睡觉
          <input type="checkbox" name="hobby">运动
        </td>
      </tr>
      <tr>
        <td>选择头像</td>
        <td><input type="file"></td>
      </tr>
      <tr>
        <td>手机号</td>
        <td><input type="text" name="phonenum"></td>
      </tr>
      <tr>
        <td>生日</td>
        <td><input type="datetime-local"></td>
      </tr>
      <tr>
        <td>出生地</td>
        <td><select name="province">
          <option value="" name="">--请选择--</option>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">深圳</option>
        </select></td>
      </tr>
           <td>自我描述</td>
        <td><textarea name="describe" cols="20" rows="5"></textarea></td>
      </tr>
      <tr>
        <td>验证码</td>
        <td><input type="text"><img src="../material/验证码.jpg" width="70" height="30"></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><input type="submit" values="登录"></td>

      </tr>
    </table>

  </form>

</body>
</html>

表单项标签

<input>输入框
<select>下拉列表
<textarea>文本域
<label>定义Input元素的标注；

< input >
type有很多种：

type="text"文本
type="password"密码
type="checkbox"复选框
type="radio"单选框，注意各个选项的name属性要一致
type="submit"向浏览器提交我们写入的信息

< select >

<select name="province">
          <option value="">--请选择--</option>
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">深圳</option>
        </select>

< textarea >

<textarea name="describe" cols="20" rows="5"></textarea>
==============
cols表示它的每列容纳字符数
rows表示行数

< button >

<button type="button" >只是一个button</button>

CSS

层叠样式表(Cascading Style Sheeting)简称CSS，与HTML相结合，用于实现内容与表现相分离的功能；即HTML用于文本编写，CSS来修饰美化。

案例

源码

结合方式

CSS与HTML的结合方式有三种：
1.内联样式

style="属性:属性值"
==================
<div style="color:red;">内联样式</div>

2.内部样式

<style>内部样式放在style中</style>
=====================
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
        p{
          font-size: 50px;
        }
  </style>
</head>

3.外部样式

<link rel="stylesheet" type="text/css" href="css文件路径名">
===============
 <link rel="stylesheet" type="text/css" href="../css/T3.css">

其中的优先级顺序为：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

选择器

1.id选择器

格式 以#开头
 #id{
   }
=============
 <div id="first">id选择器</div>

2.元素选择器

格式
  element{
    }
===============
p{
  font-size: 50px;
}

3.类选择器

格式
  element{
    }
===============
p{
  font-size: 50px;
}

4.选择所有元素

*{
  color: green;
 }

5.并集选择器

element,element{
     }
==========
div,p{
  text-align: center;
}

6.子选择器

element1>element2{
}
选择父类为div的p元素
=============
div>p{
  text-align: center;
}

7.父选择器

element element	
选择 <div> 元素内部的所有 <p> 元素。
========================
div  p {
  text-align: center;
}

8.属性选择器

element[target]{
}
为带有 target 属性的 <a> 元素设置样式：
[class]{
  text-align: center;
}

属性

字体,文本

字体

font	在一个声明中设置所有字体属性。	
font-family	规定文本的字体系列。	
font-size	规定文本的字体尺寸。	
font-size-adjust	为元素规定 aspect 值。	
font-stretch	收缩或拉伸当前的字体系列。	
font-style	规定文本的字体样式。	
font-variant	规定是否以小型大写字母的字体显示文本。	
font-weight	规定字体的粗细。

文本

letter-spacing	设置字符间距。
color	设置文本的颜色。
line-height	设置行高。
text-align	规定文本的水平对齐方式。
text-outline	规定文本的轮廓。
text-shadow	向文本添加阴影。

背景

background	在一个声明中设置所有的背景属性。
background-color	设置元素的背景颜色。
background-image	设置元素的背景图像。
background-size	规定背景图片的尺寸。
background-origin	规定背景图片的定位区域。

边框

border	在一个声明中设置所有的边框属性。
border-color	设置四条边框的颜色。
border-left-style	设置左边框的样式。
border-bottom-color	设置下边框的颜色。
outline-style	设置轮廓的样式。	
outline-width	设置轮廓的宽度。
border-image-source	规定用作边框的图片。

盒子模型

Margin(外边框)，Border(边框)，Padding（边框），Content(内容)都是相对概念；
在这里插入图片描述

案例

用CSS和HTML做一个注册案例；
下面是源码链接

https://blog.csdn.net/alpha_xia/article/details/107704946

展示效果
在这里插入图片描述