HTML标签-表单标签-表单项select&textarea
select:下拉列表
子元素:option:指定列表项
selected:默认选项
textarea:文本域:
cols:每一行有多少个字符
rows:默认多少行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单标签</title> </head> <body> <!-- form:用于定义表单的,可以定义一个范围,范围代表了采集用户数据的范围 属性: action:指定提交数据的URL(用于完成输入提交的位置) method:指定提交方式 分类:一共有7种,2种比较常用 get: 1.请求参数会在地址栏中显示 2.请求参数大小是限制的 3.不太安全 post: 1.请求参数不会再地址中显示,会封装在请求体中(HTTP协议后讲解) 2.请求参数的大小没有限制 3.较为安全0. 0表单项中的数据要想被提价:必须指定其name属性 --> <form action="#" method="post"> 账号:<input name="username" type=""><br> 密码:<input name="password"><br> <input type="submit" value="提交"><!--提交按钮--> </form> <hr> <!-- 表单属性 --> <form action="#" method="get"> <!--指定输入项的文字描述信息 label--> <label for="username">账号</label>:<input type="text" name="username" placeholder="请输入用户名" id="username"><br> <label for="password">密码</label>:<input type="password" name="password" placeholder="请输入密码" id="password"><br> <!--单选框--> 性别:<input type="radio" name="gender" value="男">男 <input type="radio" name="gender" value="女">女<br> <!--复选框--> 爱好:<input type="checkbox" name="hobby" value="睡觉"> 睡觉 <input type="checkbox" name="hobby" value="睡觉"> 睡觉 <input type="checkbox" name="hobby" value="睡觉"> 睡觉 <br> <!--图片选择框 file--> 图片:<input type="file" name="file"><br> <!--隐藏域框 hidden--> 隐藏域:<input type="hidden" name="hidden" value="aaa"><br> <!--取色器 color--> 取色器:<input type="color" name="color"><br> <!--日期 date--> 生日:<input type="date" name="date"><br> <!--具体日期 datetime-local--> 生日具体时间:<input type="datetime-local" name="datetime"><br> <!--邮箱 email--> 邮箱:<input type="email" name="email"><br> 年龄:<input type="number" name="number"><br> 省份:<select name="province"><!--下拉框 select--> <option>--请选择--</option><!--列表项 option--> <option value="1" selected>北京</option> <option value="2">上海</option> <option value="3">陕西</option> </select><br> 自我描述:<textarea name="textarea" cols="20" rows="5"></textarea> <br> <!--提交按钮 submit--> <input type="submit" value="提价"> <!--普通按钮 button--> <input type="button" value="一个按钮"><br> <!--图片提交 image--> <input type="image" src="image1/regbtn.jpg"> </form> </body> </html>
HTML标签-案例1-注册页面(HTML)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例1-注册页面</title> </head> <body> <!--表格--> <table border="1" width="25%" align="center"> <!--表单--> <form action="https://baike.baidu.com/item/%E7%AC%A8%E8%9B%8B/2890" method="get"> <tr><!--一行--> <td><!--一列--> 用户名: </td><!--一列--> <td><!--一列--> <!--本文框--> <input type="text" name="text" placeholder="请输入用户名"> </td><!--一列--> </tr><!--一行--> <tr><!--一行--> <td><!--一列--> 密码: </td><!--一列--> <td><!--一列--> <!--密码框--> <input type="password" name="password" placeholder="请输入密码"> </td><!--一列--> </tr><!--一行--> <tr><!--一行--> <td><!--一列--> Email: </td><!--一列--> <td><!--一列--> <!--邮箱框--> <input type="email" name="email"> </td><!--一列--> </tr><!--一行--> <tr><!--一行--> <td><!--一列--> 姓名: </td><!--一列--> <td><!--一列--> <!--文本框--> <input type="text" name="text" placeholder="请输入真实姓名"> </td><!--一列--> </tr><!--一行--> <tr><!--一行--> <td><!--一列--> 手机号: </td><!--一列--> <td> <!--数字框--> <input type="number" name="number" placeholder="请输入您的手机号"> </td><!--一列--> </tr><!--一行--> <tr><!--一行--> <td><!--一列--> 性别: </td><!--一列--> <td><!--一列--> <!--单选框 默认值--> <input type="radio" name="readio" checked>男 <input type="radio" name="readio">女 </td><!--一列--> </tr><!--一行--> <tr><!--一行--> <td><!--一列--> 出生日期: </td><!--一列--> <td><!--一列--> <!--出生日期框--> <input type="date" name="date"> </td><!--一列--> </tr><!--一行--> <tr><!--一行--> <td><!--一列--> 验证码 </td><!--一列--> <td><!--一列--> <!--文本框--> <input type="text" width="10"> <!--图片路径--> <img src="image1/verify_code.jpg" width="80"> </td><!--一列--> </tr><!--一行--> <tr><!--一行--> <td colspan="2" align="center"><!--一列--> <!--文本的提交按钮--> <input type="submit" value="注册"> </td><!--一列--> </tr><!--一行--> </form> </table> </body> </html>
运行结果:
标签:textarea,标签,表单,HTML,select,页面 From: https://www.cnblogs.com/qihaokuan/p/16825986.html