704&706笔记

使用input的表单标签

text,password,radio,checkbox,button,submit,file,image,hidden

没有使用input的表单标签

select,textarea,button

fieldset

表单标签（只有表单有name属性）

文本框：可以输入文本

<input type="text" name="user" value="请输入内容"/>

密码框

<input type="password" name="pwd" value="123456"/>

文本框和密码框的属性有：

name 定义名字

value 给文本框或密码框输入的默认值

disabled 是否禁用

单选框

单选框：对所有选项都添加checked的话，只有最后一个会被选中；

通过给input添加id，同时对选项文字添加 label for="id"，使得选项文字被选中的时候也可以选中前方的radio

<input type="radio" name="sex" id="woman" value="nv" checked>
	<label for="woman">女</label>

disabled是禁用功能，按钮变灰；readonly只读属性，一般用在text里

复选框

通过给input添加id，同时对选项文字添加 label for="id"，使得选项文字被选中的时候也可以选中前方的多选框

下拉菜单

<select name="" id="" size="1">
	<option value="北京">北京</option>
	<option value="天津" selected>天津</option>
	<option value="山东" selected>山东</option>
	<option value="上海" selected>上海</option>
</select>

select支持的属性
	1、size 下拉菜单一次显示出来几个选项（未点击直接显示的）
	2、multiple 支持多项选择，按住ctrl或shift可以多选（否则只能单选）
        3、name 有name后端才能判断值

option支持的属性
	1、value：选项值，提供给后端需要用的value值，必须写
	2、selected：默认选中，没有multiple的情况下给多个option赋值selected，会默认显示最后一个；multiple情况下可以都显示

按钮

普通按钮

1、<input type="button" value="提交" name="anniu" disabled />
2、<button type="button" disabled>按钮</button>

提交按钮

1、<input type="submit" value="提交" name="tj" />
2、<button type="submit" disabled>按钮</button>

在form里设置action，即提交的地址。需要对input添加name，才能将信息携带过去

普通按钮和提交按钮外观上没有区别，功能上有区别，在js中涉及

文本域

<textarea name="" id="" cols="10" rows="10" placeholder="请在此输入">这里写value，不要在代码里空格或者回车</textarea>

一般通过css控制宽高，cols代表列，rows代表行，但是设置以后也会有偏差而且很难控制

placeholder设置预置文本，灰色提示文字，不会被删去，没有内容的时候显示，输入文本以后就会被覆盖
value规定输入字段的默认值，除非手动删除，否则输入是接着预设的value继续输入的。文本域的value值写在双标签之间，所以在标签之间不能随意换行或者空格，不然会导致多行文本框里起始位置不对。
单行文本框的value是写在标签内的。

css通过resize属性来控制文本域范围大小可以如何调整，vertical只允许竖直方向缩放，horizontal只允许水平方向缩放，both水平和竖直方向都可以调节，none不允许缩放

 <style>
        textarea {
            width: 200px;
            height: 200px;
            background-color: aliceblue;
            resize: none;
        }
</style>

上传文件

<div>
	<input type="file" name="pic">
</div> 

图片按钮（一个代替提交按钮 input type="submit"的图片）

<form action="">
<!-- 所有的表单项必须包含在form里，action写入提交地址 -->
	<input type="image" name="img" src="../img/icon.png">
</form>

隐藏字段

<input type="hidden" name="" id="" value="">
<!-- 隐含的个人信息和状态，不是给普通用户看的，而是给后端看的 -->
<!-- hidden里通常会包含有value值，value值是想要带给后端看的信息 -->

字段集

<fieldset>
        <legend>性别</legend>
        <!-- legend输入信息可以在fiedlset的边框上打开一个缺口填入 -->
            <div>
                <input type="radio" name="sex" id="man">
                <label for="man">男</label>
            </div>
            <div>
                <input type="radio" name="sex" id="woman">
                <label for="woman">女</label>
        </div>
</fieldset>

legend输入信息可以在fiedlset的边框上打开一个缺口填入
可以通过text-align设置legend的位置
字段集的border默认设置为两像素

CSS（三种引用方式）

外联样式表的引用方式

1. 新建css文件
2. 在html页面引入css文件 （rel不能省略）

<link rel="stylesheet" href="./css/index.css"/>

选择器

1. 元素/标签选择器
2. 类选择器 .class
3. id选择器：id有唯一性 #id