form表单以及CSS

目录

一、form表单

1、form表单的介绍

2、form表单的数据

 3、<  input  >标签

radio

 4、<  input  > 的常用属性以及标签

checked

​disabled   

placeholder   

 value 

<  lable  >

​ <  select  >

<  textarea  >

 二、CSS

1、CSS的简单介绍

2、CSS的基本使用 

 3、选择器规则

 4、css示例以及代码

---

一、form表单

1、form表单的介绍

功能：用于搜集不同类型的用户输入的内容

有了表单，网页的内容可以由用户自己创建，那么对于网页来说，我们既是网页创建都者，也是网页的消费者。

<form></form>   由<input>标签+<button>提交按钮组成

2、form表单的数据

form表单是要提交数据的，那么数据要提交到服务器的哪里？

action="提交资源的路径，默认是当前资源"

method="本次提交采用的HTTP协议是什么方法，默认是get"

enctype="提交时，数据的编码类型 "

 3、<  input  >标签

<input>  不需要闭合标签

<input type="...">   类型不同，看到的样子就不同

              text:普通的文本输入框

              password：在浏览器默认是隐藏的文本输入框，用于输入密码

              radio：单选框

              checkbox：复选框

<input>的name属性非常重要，没有name的<input>的内容是不会提交到服务器的

会以  name=value 的形式将数据提交给服务器 

radio

真正实现单选效果，要求name是相同的，也就是相同name的radio才会互斥

 4、<  input  > 的常用属性以及标签

checked

radio/checkbox    boolean类型的属性 ，分为填写或者不填写  不需要跟value值

这时页面的单选框就默认是选中状态

disabled   

boolean类型的属性    不允许用户填写,不会提交

type="hidden"  是用户看不见的

readonly 不允许修改，可以提交

placeholder   

 占位符   text/password

 value 

radio/checkbox 一般会使用 text/password 可以用，有内容就相当于默认值

<  lable  >

对于单选框和复选框来说，如果没有<lable>,就必须点击前面的那个圈才可以选中，当有了<lable>后，<lable>包含的内容就是一个整体，点击后面的字也可以选中。在用户名和输入也是同理，就是包含的内容视为一个整体。

 <  select  >

 选择框

<  textarea  >

<textarea name="xxx"></textarea> 

元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。