HTML<input>控件学习

本文介绍了HTML中的<form>标签,用于创建表单来接收用户输入数据。表单可以设置action和method属性,其中method默认为GET,但通常使用POST以保护数据安全性。<input>控件是表单的核心,包括text、password、checkbox、radio等多种类型。此外,还讲解了textarea、select、option及label等元素的用途和属性,如name、size、maxlength等。掌握这些基本元素及其属性,将有助于快速理解和应用HTML表单。

<from> 表单标签:

作用:接受用户输入数据,并向服务器发送。

action="地址" 设置表单的提交地址。例如:action="1.html" 表示把数据发送给1.html页面。

method="get或post"(默认情况下就是get请求,特征:你输入的数据的名字和数据的值都会在地址中显示。一般表单采用post请求,特征:post请求不会明文的显示在地址中有加密的效果。)

<input> 控件(输入)

type="类型" 指定元素的类型,默认为 text。

type的类型有可能是:

text(文本)

password(密码)

checkbox(多选框)

radio(单选框)

(单选框如果想实现二选一 name值必须设置成一样的)

submit(提交)

reset(重置)

file(文件域)

(一般上传文件 会设置编码属性 enctype="multipart/form-data"表单编码属性)

hidden(隐藏)

image(图片提交)

button(普通按钮)

name="xx"  控件名称

size="xx" 指定表单元素的初始宽度

maxlength="xx" 输入的最大字符数

checked="checked"  定义选择控件的默认选项

<textarea>  文本域(cols每行字符数,rows显示行数。)

<select>  下拉菜单(size显示行数,默认值为1)

<option>  选项

<lable>  点击标签获得输入焦点

例如:

 

 总结:HTML控件学习总体较为简单,记忆每个词语表达意思及其用法,便能较为轻松学会。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>学生基本信息录入</title> </head> <body> <h1>学生基本信息录入</h1> <form action="/submit_student_info" method="post"> <label for="account">账号:</label> <input type="text" id="account" name="account"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><br> <label>性别:</label> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label><br><br> <label>兴趣:</label> <input type="checkbox" id="sports" name="hobbies" value="sports"> <label for="sports">打球</label> <input type="checkbox" id="art" name="hobbies" value="art"> <label for="art">画画</label> <input type="checkbox" id="study" name="hobbies" value="study"> <label for="study">学习</label><br><br> <label for="education">学历:</label> <select id="education" name="education"> <option value="primary">小学</option> <option value="middle">初中</option> <option value="high">高中</option> <option value="university">大学</option> </select><br><br> <label for="bio">简介:</label><br> <textarea id="bio" name="bio" rows="4" cols="50"></textarea><br><br> <label for="photo">照片上传:</label> <input type="file" id="photo" name="photo"><br><br> <input type="submit" value="确定"> <input type="reset" value="重置"> </form> </body> </html> 运行结果
最新发布
05-24
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值