0基础学HTML5重难点表单

表单

登录 注册相关的页面

1.表单元素的语法

---

<form method="post" action="result.html"> # method 提交的方式： 1.post(安全的)
      2.get(不安全)
      <p> 名字：<input name="name" type="text" > p>
      <p> 密码：<input name="pass" type="password" > p>
      <p>
        <input type="submit" name="Button" value="提交"/>
        p>
    form>

2.表单元素

---

<input type="text" name="fname" value="text"/>

3.文本框

---

<input type="text">

4.密码框

---

<input type="password">

5.单选按钮

---

性别：<input type="radio" name="a" checked/>男<input type="radio" name="a" />女

6.复选框

---

爱好:<input type="checkbox" name="name" id="">睡觉

7.列表框

---

<select name="" id="">
      <option value="">湖北省option>
      <option value="">山东省option>
      <option value="">湖南省option>
      <option value="">广东省option>
    select>

8.按钮

---

8.1普通按钮

<input type="button" value="普通按钮">

8.2重置按钮

<input type="reset" value="重置"> # 会把文本框的内容清空

8.3提交按钮

<input type="submit" value="提交按钮"> # 会把文本框的数据提交到浏览器的地址上

9.图片按钮

---

<input type="image" src="images/hetao.jpg" alt="">

10.多行文本域

---

textarea name="name" id="" cols="30" rows="10">textarea>

11.文件域

---

上传文件：<input type="file" name="" id="">

12.邮箱

---

<input type="email" name="" id="">

13.网址

---

14.数字

---

数字： <input type="number" name="" id="" min="0" max="2">

15.滑块

---

滑块：<input type="range" name="" id="">

16.搜索域

---

17.隐藏域

---

<form action="" method="post">
<input type="hidden" name="name" />
form>

18.只读

---

<form action="" method="post">

<input type="text" name="name" value="大家好" readonly/>
form>

19.按钮禁用

---

<form action="" method="post">

<input type="button" value="保存" disabled>
form>

20.表单元素的标注

---

<label for="name"> 
    爱好：<input type="checkbox" name="" id="name">打球
label>

21.表单验证

---

21.1 placeholder

<form action="" method="post"> 
    <input type="text" name="" id="" placeholder="请输入用户名">
form>

21.2required

内容不能为空

<form action="" method="post">
<input type="text" name="" id="" required>
form>

21.3pattern

使用正则表达式

<form action="#" method="post"> 
手机号码： <input type="text" name="" id="" pattern="^1[358]\d{9}">
<input type="submit" value="提交"> 
form>