表单的总结-HTML入门基础（026）

最新推荐文章于 2024-12-16 16:52:23 发布

虾米大王

最新推荐文章于 2024-12-16 16:52:23 发布

阅读量239

点赞数

分类专栏： html 文章标签： html5 html css css3 javascript

本文链接：https://blog.csdn.net/modern358/article/details/110270609

版权

html 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

今天我们对前面分享的内容进行一下总结。

表单，是一组标签的统称，即文本框、按钮等的统称。表单标签共有4个，分别是input、textarea、select和option。其中select和option是配合使用的。

input标签：

语法：

<input type="表单类型">

属性值：

text，单行文本框；

password，密码文本框；

button，按钮；

submit，提交按钮；

reset，重置按钮；

image，图片形式的按钮；

radio，单选按钮；

checkbox，复选框；

hidden，隐藏域；

file，文件上传。

textarea标签：

语法：

<textarea rows="行" cols="列">内容</textarea>

文字不多时，使用单行文本框，文字较多时使用多行文本框，密码等隐藏值使用密码文本框。

select和option标签：

语法：

<select multiple="multiple" size="列表数目">  <option value="值" selected="selected">选项值</option>  <option></option></select>

初学者一般会有疑问，HTML表单那么多，每种标签有好几个属性，如何记得住？

在学习HTML表单时，不用太刻意的去记忆属性，多练习，能记住最好，记不住，多使用也能有印象保留的。关键还是动手敲代码，才能更深刻。

另外，所有表单控件都必须放置在<form></form>标签之间，这样的数据才可以提交至服务器。

下面我们做个练习题：

<html>  <head>    <title>个人注册</title>  </head>  <body>    <form name="form1" method="" action="post">           用户名：<input type="text" id="user_name" name="user_name" value="admin"><br>      密码：<input type="password" id="pwd" name="pwd" value="123456"><br>      邮箱：<input type="text" id="email_1" name="email_1" value="admin">      <select id="email_2">        <option value="qq">qq.com</option>        <option value="163">163.com</option>        <option value="sina">sina.com</option>      </select><br>      性别：      <input type="radio" id="boy" name="sex" checked="checked"><label for="boy">男</label>      <input type="radio" id="girl" name="sex"><label for="girl">女</label><br>      兴趣：      <input type="checkbox" id="read" name="read"><lable for="read">读书</label>      <input type="checkbox" id="newspaper" name="newspaper"><label for="newspaper">看报</label>      <input type="checkbox" id="game" name="game" checked="checked"><lable for="game">打电动</label><br>      <p>个人介绍：</p>      <textarea id="personal" name="personal" rows="15" cols="40">我是虾米大王</textarea><br>      <input type="submit" id="submit" name="submit" value="注册"><br>      <p>上传个人照片：</p>      <input type="file" id="file1" name="file1">    </form>  </body></html>