form 表单 /属性的使用/元素标注 label

第三章

一、表单

1.1 form 表单

<form  method="get/post" action="result.html">
</form>
method 发送信息时的方式
get 信息不隐藏 不安全
​
post 信息隐藏 比较安全
action 表单提交的地址，把信息发送过去
​

get

 

post 不显示提示内容

1.2表单标签

input标签

属性 
​
•       type(输入类型) 
​
•       name (定义名字。方便后期传送给后台) 
​
•       value(默认值)
​
        checked(指定按钮被选中)  
​
•       selected(下拉选择框默认选择)  
​
•       size(输入框长度)  
​
•       max/minlength(输入的最多和最少数字) 

type 属性

1. text 文本文档
​
<input  type="text"  name="userName" value="用户名" size="30" maxlength="20" />
​
2. password  密码
​
<input  type="password "  name="pass"  />
​
3. email 邮箱
邮箱:<input type="email"  name="email"/>
在提交时会进行相应的验证（比较鸡肋一般不用）
4. radio 单选框
<input name="gen" type="radio" value="男"  checked（默认选择男）  />男
<input name="gen" type="radio" value="女" />女
(name 必须相等的条件下 才能实现单选)
5. checked 多选框
<input type="checkbox" name="" >打台球
<input type="checkbox" name=""  checked>按摩 
<input type="checkbox" name="" >唱歌
<input type="radio" name=""  value="">吹牛 
name值相等时才能确定是一个数组，方便后台接收
​
6. sumbit  提交按钮（跟 button 按钮效果一样）
7. reset   清空按钮 （点击按钮清空所有选项）
​
</p>
8. image （把图像传上去，点击可以跳转，或者提交）
​
<input type="image" src="../第三章图片/人人网/renren.gif" width="80" />
9. file (只要是网页用到上传或者下载文件都是这个)
<form action="" method="post" enctype="multipart/form-data" （必须写enctype）>
 <p><input type="file" name="files" />
 <input type="submit" name="upload" value="上传" /></p>
</form>
10. url  输入网址（带https就会通过没什么用）
11. number 数字
<p>请输入数字:<input type="number"  name="num" min="0" max="100" step="10" （每次点击数字变化的间隔）/></p>
​
12.range 滑块 （音量建）
<p>请输入数字:<input type="range"  name="range1" min="0" max="10" step="2"/></p>
13. sreach 搜完框
<p>请输入搜索的关键词:<input type="search"  name="sousuo"/></p>
（在输入之后会在后面显示一个×清除）
​
​

1.3 select

select .. option 列表选项框(也需要能name赋值 提交之后name=value的复制，进行 传送 )

<p>家庭地址 ：<select name="列表名称" size="">
            <option value="1" >河南 </option >
            <option value="2" selected="selected" （默认选项框，默认选择山东）>山东</option >
            <option value="3">上海</option >
            </select>

1.4 textarea 多行文本域

<textarea  name="showText"  cols="x"  rows="y">文本内容 </textarea  >

rows 高 cols 宽(相当于备注栏)

1.5 只读和禁用

只读 readonly (只能在input里使用)

禁用 disabled(所有主键都可以使用)

隐藏域 hidden （一般都是隐藏的id ，方便识别用户，更改信息）

1.6 元素标注 label （ 行内元素、相当于扩大按钮范围）

<p>
     <label for="111"> 昵称 </label>
                <input type="text" id="111" name="username" 
                       value="ktvm" 
                       pattern="[-\w\u4E00-\u9FA5]{4,10}" 
                       required  />长度为4-10个字符
</p>
for必须与id值相等

1.7 表单初级验证（在第一开始进行验证，避免错误信息访问服务器，减轻服务器压力）

placeholder 输入提示（好用）

required 必填项

pattern 正则表达式（对输入的账号/密码进行相应的验证）