html----03----html表单

html表单

创建html表单用<from>标签，表单用于向服务器传送数据。

*<from action="#"  method="post"  enctype="from/multipart">

其中action值为----将当前表单提交给谁

http get协议：会将数据和实际URL文本附加在一起，将请求参数拼接在地址栏，是不安全的。

http post协议：会将数据封装在http数据流中，是安全的，数据敏感时用post，比如修改、登录。

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

一.input元素

1.文本域

<label  for="userName">用户名:<input  type="text"  id="userName"  name="userName"  size="30"  maxlength="16"  value="请输入用户名">

-----name--文本域名称，size--长度，maxlength---最大输入字符数,for值为text的id值，

2.密码域

密码:<input  type="passWord"  id="userPwd"  name="userPwd"  maxlength="16">

-----属性与文本域相似

3.单选按钮

<input  type="radio"  name="gender"  value="1"  checked>男

<input  type="radio"  name="gender"  value="0"  >女

-----name取值相同完成互斥，checked / checked="checked" / checked="true" 默认选项为男

4.复选按钮，可多选

<input type="checkbox"  name="fruit"  value="1"  checked>苹果

<input type="checkbox"  name="fruit"  value="2"  >梨子

<input type="checkbox"  name="fruit"  value="3"  >香蕉

5.隐藏字段域

<input  type="hidden"   name="userId"  value="1">

-----在页面上用户不可见，控制台能看到

6.选择文件，并上传文件。

<from action="#"  method="post"  enctype="from/multipart">

<input type="file"  id="resume"  mutiple="mutiple">    </from>

-----1.提交文件要用post方式，get方式提交的数据最多只能是1024字节，理论上POST没有限制，可传较大量的数据。2.enctype="from/multipart"enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。3.mutiple 属性规定输入字段可选择多个值。

7.下拉框

<select  name="city"  size="4"  >

<option  value="shanghai"  selected="true">上海</option>

<option  value="beijing"  >北京</option>

<option  value="guangdong"  >广东</option>

-----size=“4”规定下拉框的大小为4,规定后页面会将下拉框全部显示出来， selected="true"，会默认选中"上海"选项

8.文本域

<textarea  id="text"  name="text" rows="10"  cols="10">  hello world  </textarea>

-----rows行数     cols列数    无value值

9.提交按钮

<input type="submit"   value="提交">

10.重置按钮

<input  type="reset"   value="清空">

-----如果value值没有，则显示“重置”

11.创建按钮

<input="button"   value="点我" >

12.颜色选择器

<input type="color">

二.  fieldest  元素

<fieldest>

　　<legend>登录</legend>

</fieldest>

-----<fieldset>  元素可将表单内的相关元素分组，没有必需的或唯一的属性 。   <legend>标签  为 fieldset 元素定义标题。