如何更改此html / php表单的宽度和样式?

时间:2016-11-27 23:29:04

标签: html css

我正在尝试更改此应用程序表单的字体大小,最佳方法是什么?我试过在CSS中添加字体大小。我出错的地方有哪些提示?感谢

https://jsfiddle.net/2wwo347n/

h2 {
    font-family: "Verdana", Verdana, serif;
    font-size: 14px;

}
  

我是新编码,其他任何提示或提示赞赏

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >

<head>
<title>Kontakt - A.Willi A.G</title>
<script>
function _(id){ return document.getElementById(id); }
function submitForm(){
    _("mybtn").disabled = true;
    _("status").innerHTML = 'please wait ...';
    var formdata = new FormData();
    formdata.append( "n", _("n").value );
    formdata.append( "e", _("e").value );
    formdata.append( "m", _("m").value );
    var ajax = new XMLHttpRequest();
    ajax.open( "POST", "example_parser.php" );
    ajax.onreadystatechange = function() {
        if(ajax.readyState == 4 && ajax.status == 200) {
            if(ajax.responseText == "success"){
                _("my_form").innerHTML = '<h2>Thanks '+_("n").value+', your message has been sent.</h2>';
            } else {
                _("status").innerHTML = ajax.responseText;
                _("mybtn").disabled = false;
            }
        }
    }
    ajax.send( formdata );
}
</script>

   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta http-equiv= "content-type" content="text/html"; charset="UTF-8">
   <meta name ="web_author" content="A.Willi A.G A.J.W">
   <meta name="robots" content="noarchive"> 
   <meta name="robots" content="selection">
   <meta name="language" content="DE">
   <meta name='pagename' content='Home, Rohrschlosser, Schweisser, Jobs, Personalverleih, Basel, Schweiz.'>
   <meta name="copyright" content="Copyright at A.Willi A.G Personalverleih, Rohrschlosser, Schweisser, Basel.">
   <meta name ="description" content=

       "Die A.Willi A.G ist als Personalverleiher in der gesamten Schweiz und im Ausland erfolgreich
        tatig mit über 30-jahrige Erfahrung in dieser Sparte.<<Wir suchen immer neue
        Montagepersonel; Rohrschlosser, Schweisser und Monteur>><<Basel, Jobs, Welder,
        Pipefitter, Mntage, Arbeitsmarkt, Temporär>>">

</head>

<body>


<link rel="shortcut icon" href="aw.png">
<link rel="stylesheet" href="index.css" type="text/css"/>
<div class="container">

<div class="logo"> 
<h1 align="center"><img src="logo2.png" height="110" width="500"  alt="A.Willi A.G" /</h1>
</div>

<div class="menu"> 
<ul>
     <li><a href="index.html">Home</a></li> 
     <li class="dropdown">
     <a href="" class="dropbtn">Bewerber</a>
     <div class="dropdown-content">
     <a href="info.html">Info</a>
     <a href="jobs.html">Jobs</a>
</div>  
</li>

<li class="dropdown">   
     <a href="#" class="dropbtn">Kunde</a>
     <div class="dropdown-content">
     <a href="personnel.html">Personalverleih</a>
     <a href="rental.html">Werkzeuge Mieten</a>
     <a href="refrences.html">Referenzen</a>
     <a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
</ul>
</li>
</div>

<div class="slideshow"> 
     <img src="panorama.jpg">
     <img src="panorama.jpg">
     <img src="panorama.jpg">
</div>

<h2 align="center"> <!--FORM-->
<form id="my_form" onsubmit="submitForm(); return false;">
  <p><input id="n" placeholder="Vorname" required></p>
  <p><input id="x" placeholder="Nachname" required></p>
  <p><input id="z" placeholder="Telefon" required></p>
  <p><input id="e" placeholder="Email Address" type="email" required></p>
  <textarea id="m" placeholder="write your message here" rows="10" required></textarea>
  <p><input id="mybtn" type="submit" value="Submit Form"> <span id="status"></span></p>
</form>
    </h2>

1 个答案:

答案 0 :(得分:1)

您似乎正在更改字体大小的DOM是<h2>。如果我正确理解您的问题,您似乎想要更改<input>代码的字体大小。您可以使用内联样式来增加字体大小,如下所示:

<p><input style="font-size: 40px" id="n" placeholder="Vorname" required></p>
<p><input style="font-size: 40px" id="x" placeholder="Nachname" required></p>
<p><input style="font-size: 40px" id="z" placeholder="Telefon" required></p>

然而,更好的做法告诉我们,我们应该采用类似于您对<h2>标记执行的操作,但css文件中的<input>除外:

input {
  font-size:40px;
}