首页 > 技术文章 > 表单相关标签

wangqianming12138 2021-01-16 14:29 原文

主要内容

表单本身标签<form>标签,表单元素<input>标签,<select>标签,<textarea>标签


解释

表单:是一个区域,采集用户信息

表单元素:包含文本框,按钮,单选,复选,下拉列表,文本框


表单<form>标签

form标签成对出现

格式:

<form action="数据处理网页">

表单元素

</form>

action元素是交给web后端系统进行处理的网站


input标签

input标签用于输入文本和密码

格式:

<form>

  <input type="text|password"/>

</form>

typy元素为text时,为文本框,为password时,是密码框

代码示例:

<html>
    <head><title>表单练习</title></head>
    <body>
        <form>
            账户:<input type="text" name="username"/><br/>
            密码:<input type="password" name="userpassword"/>
        </form>
    </body>
</html>

 

样式:

 

 input标签有一个name属性,这个属性的意义在于要将提交的数据交给后台处理的时候用于识别来源于哪个表单元素里面的数据


 

按钮

按钮分为提交按钮和重置按钮

按钮是input的type元素的一个种类,是submit

代码示例:

 1 <html>
 2     <head><title>表单练习</title></head>
 3     <body>
 4         <form>
 5             账户:<input type="text" value="" name="username"/>
 6             <input type="submit" value="提交" name="button"/>
 7             <input type="reset" value="重置" name="reset"/>
 8         </form>
 9     </body>
10 </html>

 

样式:

 

 value元素用于显示文字


 单选框和复选框

单选框只可以选一个选项,复选框可以选多个选项

单选框和复选框也是input 的 type 的一个种类,分别对应 radio 和 checkbox

代码:

 1 <html>
 2     <head><title>表单练习</title></head>
 3     <body>
 4         <form>
 5             性别:男<input type="radio" value="男" name="性别" checked="checked"/>
 6<input type="radio" value="女" name="性别" /><br/>
 7             爱好:篮球<input type="checkbox" value="篮球" name="爱好" checked="checked"/>
 8             足球<input type="checkbox" value="足球" name="爱好"/>
 9             游泳<input type="checkbox" value="游泳" name="爱好"/><br/>
10             瞎写的<input type="radio" value="女" name="1" /><br/>
11         </form>
12     </body>
13 </html>

 

样式:

 

 注意:radio如果name相同,那么只能选一个,如果想再新建一个栏目,要更换name,如果想在同一栏目下新建选项,不要更改name


下拉列表框

下拉列表框用select标签和option标签

代码:

 1 <html>
 2     <head><title>表单练习</title></head>
 3     <body>
 4         <select>
 5             <option selected="selected">沈阳</option>
 6             <option>鞍山</option>
 7             <option>铁岭</option>
 8             <option>大连</option>
 9         </select>
10     </body>
11 </html>

样式:

 

 


文本域

文本域标签是textarea,rows元素规定行数,cols元素规定列数

代码:

1 <html>
2     <head><title>表单练习</title></head>
3     <body>
4         个人简介:<br/>
5         <textarea rows="30" cols="150" >请在此处输入文字...
6         </textarea>
7     </body>
8 </html>

样式:

 

推荐阅读