HTML-day-4-表单

Posted 2020-08-08 喜气洋洋得意

表单
使用<form>标签定义一个表单，
格式为：<form id="" name="表单类型" method="表单的提交方式" action="提交的地址">
表单内容
</form>

一、属性：
①id不可重复
②name可重复
③method，有两种提交方式：get&post，get提交方式有长度限制，并且编码后的内容在地址栏可见；post提交方式无长度限制，编码后的内容在地址栏不可见。

二、表单元素
表单元素大致分为四种类型，文本类、按钮类、选择类和其他。
输入框，可以使用input向表单中添加大部分元素，input标签格式为：<input id=""type="类型" name="名称" value="值"/>，
inputde的类型
1、文本类
①单行文本框，<input type="text" name="username" id="" value="需要显示的文字"/>
②密码框，<input type="password" name="password" id="" value="需要显示的文字"/>
③文本域，<textarea name="" id="" cols=""（最大输入字符多少） rows=""（最多输入几行）>
文本域名
</textarea>
④隐藏域，<input type="hidden" name="" id="" value="需要显示的文字"/>

2、按钮类
①提交按钮，<input type="submit" name="" id="" value="需要显示的文字" disabled="disabled"/>
<input type="submit" name="" id="" value="需要显示的文字" />

②重置按钮，<input type="reset" name="" id="" value="需要显示的文字" disabled="disabled"/>
<input type="reset" name="" id="" value="需要显示的文字" >

③普通按钮，<input type="button" name="" id="" value="需要显示的文字" disabled="disabled"（不可用的）/>
<input type="button" name="" id="" value="需要显示的文字" enabled="enabled"（可用的）/>

④图片按钮，<input type="image" src="图片地址" name="" id="" disabled="disabled"（不可用的）/>
<input type="image" src="图片地址" name="" id="" enabled="enabled"（可用的）/>

3、选择类
①单选按钮组，<input type="radio" name="" value="需要显示的文字" />文本名称
<input type="radio" name="" value="需要显示的文字" checked="checked"/>文本名称
注：这里的value值是看不到的，是提交给程序用的，显示的名称须写在标签外面；
这里的name值是用来分组的，只有组名称相同时才可以单选，checked是默认选中

②复选框组，<input type="checkbox" name="" value="需要显示的文字" />文本名称
<input type="checkbox" name="" value="需要显示的文字" checked="checked"/>文本名称
注：这里的value值是看不到的，是提交给程序用的，显示的名称须写在标签外面；checked="checked"设为默认选中。

③下拉列表，<select name="" id="" size="1"（菜单） >
<select name="" id="" size="2" mutiple="mutiple">
<option value="" select="select">内容1</option>
<option value="">内容2</option>
<option value="">内容3</option>
</select>
注：当mutiple="mutiple"时，下拉列表会出现双箭头，而不会显示下拉列表的全部内容；
当size="1"，为菜单，下拉列表显示一行；
当size=">=2"时，为列表，可显示两行或两行以上；
select="select"设为默认
④文件上传，<input type="file" name="" id="" />
<lable for="">
</lable>
注：<lable>标签为input元素定义标注（标记）。lable元素不会向用户呈现任何特殊效果。不过它为鼠标用户改进了可用性。
如果您在lable元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相
关胡表单控件上。
<lable>标签的for属性应当与相关元素胡id属性相同。