快捷搜索:  汽车  科技

html单选框怎么编写(html开发笔记22-表单元素)

html单选框怎么编写(html开发笔记22-表单元素)注意事项:1、表单元素中,用户可以输入值的时候,可以不加value属性 -- (比如:文本框、文本域)。2、当表单元素中没有值的时候,需要加value属性 -- (比如:单选框、复选框)。

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

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

html单选框怎么编写(html开发笔记22-表单元素)(1)

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

html单选框怎么编写(html开发笔记22-表单元素)(2)

html单选框怎么编写(html开发笔记22-表单元素)(3)

html单选框怎么编写(html开发笔记22-表单元素)(4)

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

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

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

注意事项:单标签的内容是单标签的属性(也就是在标签中加入 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>

猜您喜欢: