html开发笔记22-表单元素「用户名、密码、单选框、多选框」「终于解决」

html开发笔记22-表单元素「用户名、密码、单选框、多选框」「终于解决」表单:就是从网页上看见的各种各样的框,比如 登陆框、同意协议的选项框、下拉框、只能选男女的选框等。代码实现:用户名、密码、单选框、多选框、文件上

欢迎大家来到IT世界,在知识的湖畔探索吧!

一、表单元素介绍【用户名、密码、单选框、多选框】

1、表单:就是从网页上看见的各种各样的框,比如 登陆框、同意协议的选项框、下拉框、只能选男女的选框等。

html开发笔记22-表单元素「用户名、密码、单选框、多选框」「终于解决」

二、演示:主要代码在下面

html开发笔记22-表单元素「用户名、密码、单选框、多选框」「终于解决」

html开发笔记22-表单元素「用户名、密码、单选框、多选框」「终于解决」

html开发笔记22-表单元素「用户名、密码、单选框、多选框」「终于解决」

三、代码实现:用户名、密码、单选框、多选框、文件上传框、文本框、下拉框

代码需要复制到编译器里面看,效果会好些

代码实例:所有的框、按钮,都在下面的代码中,并且有注释,照着写就好

注意事项:单标签的内容是单标签的属性(也就是在标签中加入 value 属性);双标签的内容在两个标签之间。

注意事项:

1、表单元素中,用户可以输入值的时候,可以不加value属性 — (比如:文本框、文本域)。

2、当表单元素中没有值的时候,需要加value属性 — (比如:单选框、复选框)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--网页抬头-->
    <title>Title</title>
</head>

<body>

<!-- 1、定义表单域:使用一对form标签-->
<form>
  <!-- 2、定义文本框(用户名):使用一个 input 标签(表单元素之一)
   name="" :服务器可以通过name属性拿到你从网页提交的信息,否则拿不到(单标签适用)。
   value="" :可以在网页的输入框中添加一段提示语。
  -->
  <input type="text" name="kahao" value="请输入你的卡号">


  <!-- 3、定义密码框:也是使用input标签,多了个type属性,就是为了在输入密码的时候加密
   这里的两个属性:name 和 value 和上面同理(只适用单标签)
  -->
  <input type="password" name="password" value="请输入密码">


  <!-- 4、定义单选框:使用input标签
     (1)单选框也是用input标签,type属性值为radio
     (2)还需要加 name 属性并且这两个属性的值必须一样,这样就可以同时只能选择一个了
     (3)value属性:服务器可以通过value属性获取到网页当前提交的是男或女,否则拿不到。
  -->
  <input type="radio" name="sex" value="1">男
  <input type="radio" name="sex" value="0">女

  <!-- 5、单选框,默认选中:如果想让哪个框默认选中,可以在后面加上checked属性,值也是-->
  <input type="radio" name="sex" checked="checked">不男不女


  <!-- 6、多选框:也是用input标签,type属性,值是checkbox

  -->
  <input type="checkbox" name="aihao" value="1">吃
  <input type="checkbox" name="aihao" value="2">喝
  <input type="checkbox" name="aihao" value="3">玩
  <!-- 多选框也可以预设默认选中,属性是checked值也一样-->
  <input type="checkbox" checked="checked">乐


  <!-- 7、文件选择框:用来从网页上传文件,也是用input标签
    name属性:文本框也需要添加 name 属性,这样在网页提交文件的时候服务器才拿得到。
  -->
  <input type="file" name="file">


  <!-- 8、下拉框:需要select和多个option配合使用
   name="province": 在 select标签上加name属性之后,网页上提交的信息服务器才可以拿到。
  -->
  <select name="province">
    <option>河南省</option>
    <option>河北省</option>
    <option>湖南省</option>
    <!-- 在标签后面加上selected属性可以让它成为默认选中项-->
    <option selected="selected">湖北省</option>
  </select>
  <br>
  <br>


  <!-- 9、文本框:允许你自由输入文本
    rows="5" :定义文本框默认的高度
    cols="50" :定义文本框默认的宽度
    name="message": 和上面一样,加name属性之后是为了提交的信息能被服务器拿到。
  -->
  <textarea rows="5" cols="50" name="message">请在这里输入文字...</textarea>


  <!-- 10、按钮:按钮上有默认文字的,可以通过添加value属性修改默认文字-->
  <!-- 10.1 提交按钮:也是input标签,属性值是submit-->
  <input type="submit">
  <!-- 10.2 普通按钮:也是用input标签,并且可以添加 value="尽情点击" 作为按钮名-->
  <input type="button" value="尽情点击">
  <!-- 10.3 重置按钮:-->
  <input type="reset">
  <!-- 10.4 双标签按钮:-->
  <button>和提交按钮相同</button>
</form>
</body>

</html>

欢迎大家来到IT世界,在知识的湖畔探索吧!

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/18471.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信