wj他
wj他

HTML 表单4

4.1表单
什么是表单？收集用户填写的信息并将其提交到后台服务器。
（表单的标签）
action属性：指定提交的地址；
method属性：指定提交的方式、get/post。
get和post方式的区别：长度的限制，不能大于2KB；安全性，get方式提交的数据会直接呈现在地址栏，敏感数据容易被截获（（1）get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。get安全性非常低，post安全性较高。)
4.2文本框

     type="text">
  maxlength：指定文本框能接收的最大字符个数；
  size：指定文本框的大小（宽度）；
  value：指定初始值。

4.3密码框

      type="password">
  密码框和文本框是一样的，文本框的属性同样属用于密码框，唯一不同的是密码框是以掩码的形式显示内容、保证安全性。

4.4 label
的作用：
（1）可以单独对其应用相应的格式；
（2）for属性可以使之和某个关联，即当单击文本会激活对应的文本框。

<label for="userId">账号：label>
    "userId" type="text" maxlength="10" size="20" value="abc">
    

    <label for="password">密码：label>
    "password" type="password" maxlength="6">
  Maxlength：输入文字的长度
  Size：文本框的大小
  Value：默认的值
  在

4.5单选按钮

type="radio" name="role">学生
type="radio" name="role" checked>教师
type="radio" name="role">管理员

如果需要将若干个单选按钮编成一组（一组最多有一个被选中）需要设置相同的name属性。如果需要默认选中摸个选项，需要加上checked属性。（checked属性后面）
标签属性的表示形式：
（1）键值对：属性名=属性值
Type=“text”、maxlength=“6”
（2）一些取值为布尔类型的属性直接使用属性名
checked readonly
4.6多选按钮

你的兴趣爱好是：
type="checkbox" checked>音乐
type="checkbox" >阅读
type="checkbox">游戏
type="checkbox">电影
type="checkbox">睡觉

Checked默认选中

4.7提交按钮

type="submit">

（1）点击按钮之后跳转到form表单的Action。
（2）value属性：value对应的值就是按钮上显示的文字。
（3）点击按钮：将form表单中的input中name属性值（键）和用户输入的值组成键值对（或input标签value属性对应的值）。并拼接到form表单action属性值的后面。

http://localhost:63342/untitled1/disizhang4/result.html?name=huadian&password=123456
http://localhost:63342/untitled1/disizhang4/result.html?name=huadian&password=123456&sex=1

4.8重置按钮

type="reset" value="刷新">

（1）点击按钮，重置表单内部输入框（单选按钮）
（2）value属性：value对应的值就是按钮上显示的文字。
4.9普通按钮

type="button" value="登录">

（1）点击按钮，没有任何反应。
（2）value属性：value对应的值就是按钮上显示的文字。
4.10图片按钮

type="image" src="图片" alt="登录">

（1）作用和submit按钮是一样的
（2）需要设置src的值，如果src对应的路径没有找到图片，（并且有没有设置alt属性，按钮显示默认值“提交”，如果设置alt属性则alt的值。（类似img标签））。
4.11标签
（1）内容可以是任意资源（eg：图片、段落、视频…）
（2）当button标签放置在form内部，作用和submit一样。
4.12文件选择框

选择你的头像type="file" accept="application/pdf">
选择你的头像type="file" accept="image/jpeg">`
简历type="file" accept="application/pdf">
简历type="file" accept=".doc">

4.13下拉列表
使用下拉列表的好处
（1）节省页面空间，使得页面更简洁；
（2）方便输入；
（3）规范输入

"#" method="get">
    你来自：
    
    type="submit">

标签的name属性定义了提交的参数；
标签的内容定义了该选项显示的文本，value属性定义了选中该选项。
时传递的参数。
多选可通过设置multiple属性来实现，Ctrl+单击选择多个

标签的size属性定义了下拉列表框显示的选项个数，当小于实际选项个数时，会自动增加一个滚动条

<select>
    <optgroup label="国产">
        <option value="红旗">红旗option>
        <option value="byd">比亚迪option>
        <option value="奇瑞">奇瑞option>
    optgroup>
    <optgroup label="德国系">
        <option value="benz">奔驰option>
        <option value="bwm">宝马option>
        <option value="大众">大众option>
    optgroup>
    <optgroup label="日系" disabled>
        <option value="丰田">丰田option>
        <option value="本田">本田option>
        <option value="三菱">三菱option>
        
    optgroup>
select>

的label属性定义分组显示的文字，disabled设置该分组不能用。

4.14 textarea
Textarea标签主要方便用户输入较多文字信息，rows属性指定区域的行数，cols属性指定区域的列数。

<textarea rows="3" cols="9">textarea>