web前端day03学习

一、表单基础结构
1、表单介绍
2、语法：<form>表单元素</form>
3、<form>标签常见的表单元素：
<input type=“类型属性”name=“名称“ ......./>:表单输入标签为单行文本域
<select>：菜单和列表表签
<option>:菜单和列表项目标签
<textarea>：文字域标签
<optgroup>:菜单和列表项目分组标签

文件域：
语法：<form>
<input type="file" name="...."/>
</form>

input标签(单选框和复选框):

单选框： 语法：
<form>
<input tyype="radio" name="xxxx" value=“xxx”/>
</form>
注意：单选框的name值是一样的，点击时value值提交服务器

复选框
语法：
<form>
<input type="checkbox" name="xxxx" value=“xxx”/>
</form>
注意：复选框的name值是不一样的，点击时value值提交服务器

三、按钮：
语法：
<input type="button" name="xxxx" value="xxxxx"/>无效果一般要配合js
<input type="submit" name="xxxx" value="xxxxx"/>提交按钮
<input type="reset" name="xxxx" value="xxxxx"/>清除表单按钮

图像域：
语法：<input type="image" name="xxxxx" src="路径" />

隐藏域：
语法：
<input type="hidden" name="xxxxx" value="xxxx"/>这是看不到的。

select标签(下拉菜单和列表)：
语法：
<select size=“5”>size表示显示5条
<option value="xxxx" selected>选项</option> selected表示默认属性值
<option value="xxxx">选项</option>

</select>
注意：这个value值才是提交表单时传给服务器的值，而不是<option>间的选项
<select>标签属性

分组下拉菜单和列表：
<optgroup label="华东" >
<oprion value="上海">上海</option>
<oprion value="福建">福建</option>
<oprion value=”厦门">厦门</option>
</optgroup>

textarea(多行文本框/文字域标签)：
语法：
<textarea name="设置文本区的名称" placeholder=“设置描述文本域预期的简短示” rows=“设置文本区内的可见行数”cols=“设置文本区内可见的宽度”>fdsafasf</textarea>

<form>标签：
<form action="提交表单时向何处发送表单数据" method="设置表单以何种方式发送到指定页面" name="" target=“在何处打开action URL” enctype=“在发送表单数据之前如何对其进行编码”....>
表单元素
</form>
注意： method：有get/post两个值简单来说设置get会在网页的URL中看到自己设置的表单内容，包括密码，因此安全性不高一般用于信息获取，而设置了post属性就不会显示表单内容，一般情况下post用于修改服务器上的资源