HTML基础知识（3）

1.初识表单

1.表单标签及表单属性

<form action="URL地址" method="提交方式">
<!--各种表单控件-->
</form>

URL地址:数据提交的地址
提交方式：有两种 一种是post方式 另外一个是get方式
post：提交表单的方式不会改变浏览器地址的状态 表单数据也不会被显示在地址栏中（安全性能高）
get：提交表单的方式会改变浏览器地址的状态 表单数据在URL中清晰的显示出来（安全性能低）

2.< input >标签的常用属性及其格式

< input >的常用属性


1.文本框
语法：

<input type="text">

可用value属性指定默认值和使用maxlength属性指定输入的数据长度
2.密码框
语法：

<input type="password">

输入密码1时会用黑色实心圆点代替 对数据进行遮挡
3.单选按钮
例子：

<form>
性别：
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</form>

希望多个默认选项可用加checked属性
4.复选框
例子：

<p><input type="checkbox" name="1" value="同意">我同意该协议</p>
<p><input type="checkbox" name="1" value="不同意">我不同意该协议</p>
<p><input type="checkbox" name="1" value="半同意">我半同意该协议</p>
<p><input type="checkbox" name="1" value="全同意">我全同意该协议</p>

希望多个默认选项可用加checked属性
5.按钮
语法：

 <p><input type="button" value="普通按钮"></p>
 <p><input type="submit" value="提交按钮"></p>
 <p><input type="reset" value="重置按钮"></p>   

button按钮：会显示按钮的value值
submit按钮：表单会将数据提交到action属性所指定的URL
submit按钮：表单中的数据会被清空
6.文件域：
例子：

<form>
<p><input type="file"></p>
<p>input type="submit" value="上传"</p>
</form>

7.邮箱
例子:

<form>
<p><input type="email"></p>
<p>input type="submit" value="提交"</p>
</form>

输入错误的邮箱格式 会提示你
8.网址：
例子：

<form>
<p><input type="url"></p>
<p>input type="submit" value="提交"</p>
</form>

输入错误的网址格式 会提示你
9.数字
例子：

<form>
<p><input type="number" min="10" step="2"></p>
<p>input type="submit" value="提交"</p>
</form>

10.滑块
例子：

<form>
<p><input type="range" min="10" max="100" step="10"></p>
<p>input type="submit" value="提交"</p>
</form>

属性：
max：最大值
min：最小值
value：默认值
step：合法数字的间隔
11.搜索框
例子：

<form>
<p><input type="search"></p>
<p>input type="submit" value="提交"</p>
</form>

3.列表框和多行文本域

1.列表框

<select name="指定列表名称">
   <option value="可选项的值" selected="selected">...</option>
   <option value="可选项的值">...</option>
    <option value="可选项的值">...</option>
    。。。
    </select>
   

select标签必须包含一个option
sekected属性表示默认选中 但只能有一个
2.多行文本域

<textarea name="taxtarea" cols="显示的宽度" rows="显示的行数">
</textarea>

4.表单的高级应用

1.表单的隐藏域
例子：

<form  method="get">
        
        <p>账号<input type="text" name=""user></p>
        <p>密码<input type=" password" name="pass"></p>
        <p><input type="hidden" value="123" name="userID"></p>
        <p>input type="submit" value="提交"</p>
        

2.表单的只读和禁用
readonly和disabled属性可以实现对账号文本框的只读和禁用
3.表单元素的标注
语法：

<laber for="表单元素的id">标注的文本</label>

在选择时文本点击也可以选到

5.表单验证

placeholder属性

 <form>
       
        <p>账号<input type="text"  value="张三" readonly></p>
       </form>

文本框带有提示语 有输入则会被消失
required属性

 <form>
       
        <p>账号<input type="text" required></p>
        <p>input type="submit" value="提交"</p>
       </form>

没有输入任何内容则会提示
pattern属性
当用户输入的内容不符会弹出提示语