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="提交"/>
        <input type="reset" name="Reset" value="重填“/>
      </p>
    </form>

2.表单元素


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

在这里插入图片描述

3.文本框


在这里插入图片描述

<input type="text">

4.密码框


在这里插入图片描述

<input type="password">

5.单选按钮


<!-- 单选框 互斥:必须保证name属性的值一样 checked :默认选中-->
性别:<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">
<!-- 只读: readonly-->
<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>

猜你喜欢

转载自blog.csdn.net/xiamilaoshi/article/details/107838506