表单form的属性,单行文本框、密码框、单选多选按钮

时间:2022-04-24 08:31:09

基础表单结构:

<body>

  <h1>

  <hr />

  <form action="" name="myFrom" enctype="multipart/form-data >

    <input type="text" name="unname" /><br/>

    <input type="password" name="pwd" /><br/>

    <input type='submit" value="提交" />

  </form>

</body>

{form表单的属性}

  action=“URL”:一个URL地址:指定form表单向何处发送数据。

.它里面放一个路径,我们在代码编辑器中写form是总会自带着它,<form action="">.

.就是我们表单提交到服务器需要一段程序来处理,那有哪个程序处理就可以在action中指定,如果我是注册,可以由注册的程序来处理,登录由登录的程序来处理

  name作用是给表单起名,为了便于我们操作,一个页面不止一个表单好用来区分

<form name="regFrm">通常我们给表单起名这样起:reg是这个表单是干什么的(reg注册)后面以Frm结尾,就是form的缩写。

    enctype=“string”:规定在发送表单之前,如何对表单数据进行编码。通常在使用文件上传时,我们会写enctype=“multipart/form-data”,以二进制传输。

  method=“get/post”:指定表单以何种方式发送到指定的服务器程序最常用的是个头和post。

表单元素:

。单行文本框<input type="text" />默认值是type=“text”

。密码框<input type="password" />

。单选按钮<input type="radio" />例子:

写作业了:<input type="radio" checked="checked" name="gender" value="male" /><br />

没写作业:<input type="radio" name="gender" value="female">

  checked属性,默认选中当前的单选按钮,name是命名,value值是提交给后台程序看的。“相同的名字会把radio分为一组,一组radio只能选择一个。”名字相同即为一组让这一组radio产生关联用name。

。复选框<input type="checkbox" />

和单选按钮差不多

。隐藏域<input type="hidden" />

。文件上传<input type="file" />

  <form action="" method="post" enctype="multipart/form-data" >

    <input type="file" name="file1" />

  </form>

。下拉框<select>标签<select><option value="1">北京</option></select>

。多行文本框<textarea></taxtarea>

。标签<lable></lable>为input元素定义标注。

label本身不会有特殊效果,但它和其他input标签使用可以提升用户的使用体验,用户不用非得点击到按钮,而是点击文字即可选中。<label>虽然和input进行了关联,但是提交的依然是value的值,label中的内容不会被提交。label标签一般和radio、CheckBox类型一起使用。

<form>

  <label for="male">Male</label>

  <input type="radio" name="sex" id="male" />

</form>

。元素集<fieldset></fieldset>

。提交按钮<input type="submit" />

。普通按钮<input type="button" />

。重置按钮<input type="reset" />

练习:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <form action="" name="lainxiForm" enctype="multipart/form-data" method="get">
  账号:<input type="text" name="noname" />
  密码:<input type="password" name="pwd" />
       <input type="submit" value="提交"/>
  <!--(单选有无name都可以)-->
  </form><hr />
  <form action="" name="forName" method="get">你喜欢什么:
    <label for="juhua">菊花</label><input type="radio" name="lianxi" checked="checked" id="juhua"value=""/>
    <label for="kuihua">葵花</label><input type="radio" name="lianxi" id="kuihua" value=""/>
    <!--value值要传送到后台服务器,需要后台人员告诉你-->
    <!--复选框需要name联系在一起-->
    <input type="submit" value="提交"/>
  </form>
  <hr />
  <form>
    你的爱好是:
    睡觉<input type="checkbox" name="hobby"/>
    吃<input type="checkbox" name="hobby" />
    写代码<input type="checkbox" name="hobby" checked="checked"/>
    <input type="submit" />
</form>
</body>
</html>