表单的用法

最新推荐文章于 2024-07-17 13:47:47 发布

呆码王子

最新推荐文章于 2024-07-17 13:47:47 发布

阅读量109

点赞数 1

分类专栏： HTML 文章标签：前端 html javascript Powered by 金山文档

本文链接：https://blog.csdn.net/L123456llljdjdbd/article/details/129289239

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

表单定义：

将用户信息等本地的数据信息提交给服务器的

比如：百度的搜索框注册登录这些操作都需要填写表单

如何创建表单：

1:创建表单 form标签

属性：

action属性（必须要写）

指向的是一个服务器的地址，当我们提交表单时将会表单相关的数据提交到action属性对应的地址

2:添加表单项：

使用form创建的仅仅是一个空白的表单，

我们还需要向form中添加不同的表单项

（1）input来创建一个文本框，

type属性：text

name属性：提交内容的名字

如果希望表单项中的数据会提交到服务器中，必须指定一个name属性

value属性值：作为文本框的默认值显示

就是用户输入的内容，也就是要提交给服务器的值

（2）input创建一个密码框

type属性值:password

name属性：提交密码的名字

（3）input创建一个单选按钮

- type属性：radio

- name属性进行分组，属性相同是一组按钮，如果不设置，则都可以选择

- value属性必须设置，这样被选中的表单项的value属性值将会最终提交给服务器

- checked属性默认选中可以直接添加属性，不写属性值

（4）input创建一个多选框

-type属性:checkbox

-checked属性默认选中

(5)select来创建一个下拉列表

-name属性设置给select，

-value属性设置给option

-selected属性设置给option，将选项设置为默认选中

- 在下拉列表中使用option标签来创建一个一个列表项

 <body>
<form action="./target.html">
用户名：<input type="text" name="username" value="张三" /><br /><br />
 密码：<input type="password" name="password" /><br /><br />
 性别：男 <input type="radio" name="sex" checked /> 女 <input type="radio" name="sex" /> <br /><br />
兴趣爱好：唱歌 <input type="checkbox" checked /> 跳舞 <input type="checkbox" /> 跑步 <input type="checkbox" checked /> 诗朗诵<input type="checkbox" /> 古筝<input type="checkbox" /> <br /><br />
 出生年月：年
      <select name="year">
        <option value="2000">2000</option>
        <option value="2001" selected>2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2004">2004</option>
      </select>
      月
      <select name="mouth">
        <option value="1月">1月</option>
        <option value="2月">2月</option>
        <option value="3月">3月</option>
        <option value="4月">4月</option>
        <option value="5月">5月</option></select
      ><br />
      <br />
个人简介：<textarea name="info" cols="40" rows="10"></textarea><br /><br />
<input type="submit" value="注册" />
input type="reset" />
<input type="button" value="按钮" />
<button type="reset">重置</button>
</form>
</body>

补充：

input属性补充

1: autocomplete="off" 关闭自动补全

2: readonly 设置为只读，不能修改

3: disabled 设置为禁用

4: autofocus 自动获取焦点

5: placeholder 表单提示内容

呆码王子

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单的用法

表单定义：将用户信息等本地的数据信息提交给服务器的比如：百度的搜索框注册登录这些操作都需要填写表单如何创建表单：1:创建表单 form标签属性： action属性（必须要写）指向的是一个服务器的地址，当我们提交表单时将会表单相关的数据提交到action属性对应的地址
复制链接

扫一扫