Foro de elhacker.net

Hola

Tu código funciona, estas guardando todas las variables concatenadas aqui:

fwrite($file,$nombre.$apellido.$carrera.$materia);

Si quieres separarlas:

fwrite($file,"$nombre $apellido $carrera $materia");

Obviamente, el orden las variables determina el orden en que se escriben al archivo de texto.

Tienes que agregar el caracter correcto para la nueva linea (en windows se usa \r\n y en otros \n).

Puedes usar:

fwrite($file,$nombre.PHP_EOL.$apellido.PHP_EOL.$carrera.PHP_EOL.$materia.PHP_EOL);

Si no has enviado ninguna cabecera http antes:

header("Location: http://paginaaredirigir.com");

¿Porqué no haces ese mismo efecto con puro CSS?

(http://i.imgur.com/vCtFlpG.png?1)

.textfield
{
  border: 1px solid #ccc;
  box-shadow: 0px 0px 0px 10px #fff,
    0px 0px 0px 11px #ccc,
    0px 2px 0px 11px #999;
  border-radius: 2px;
  color: #888;
  font-size: 20pt;
  padding: .25rem .5rem;
  transition: all .25s linear;
}
.textfield:focus
{
  border: 1px solid rgba(0,144,255,.4);
}

En tu HTML, por ejemplo (lo único que importa para poder utilizar el estilo es que le asignes a los input que desees la clase 'textfield'):

<input type="text" class="textfield" />

Y en tu hoja de estilos:

.textfield
{
    border: 1px solid #ccc;
     box-shadow: 0px 0px 0px 10px #fff,
       0px 0px 0px 11px #ccc,
       0px 2px 0px 11px #999;
     border-radius: 2px;
     color: #888;
     font-size: 20pt;
     padding: .25rem .5rem;
     transition: all .25s linear;
}
.textfield:focus
{
     border: 1px solid rgba(0,144,255,.4);
}

Tu Formulario:

<div><form action="enviar.php" method="post">
<p><input id="nombre" class="textfield" name="nombre" type="text" />&nbsp;</p>
<p><input id="apellido" class="textfield" name="apellido" type="password" /><br />
<input type="submit" value="Enviar" />&nbsp;
</form></div>

Y en tu hoja de estilos (.css) agregas el código que te puse:

.textfield
{
    border: 1px solid #ccc;
    box-shadow: 0px 0px 0px 10px #fff,
       0px 0px 0px 11px #ccc,
       0px 2px 0px 11px #999;
    border-radius: 2px;
    color: #888;
    font-size: 20pt;
    padding: .25rem .5rem;
    transition: all .25s linear;
}
.textfield:focus
{
    border: 1px solid rgba(0,144,255,.4);
}

Y eso es todo. Como recomendación te diría no utilizar saltos de línea en HTML (<br />), ya que puedes posicionar los elementos como desees (en la mayoría de los casos xD) con CSS. Pero ese ya es otro tema, tienes que estudiar CSS.

Sí, así te vale.

Formulario:

<section class="panel">
 
  <section class="panel-head">
    <span class="logo"></span>
    <p class="panel-title">T&#237;tulo del form</p>
  </section>
 
  <section class="panel-body">
 
    <section class="form-group-hoz">
      <label for="nombre">Nombre:</label>
      <input type="text" id="nombre" class="textfield"/>
    </section>
 
    <section class="form-group-hoz">
      <label for="apellido">Apellido:</label>
      <input type="text" id="apellido" class="textfield"/>
    </section>
 
    <section class="form-btn-group-hoz">
      <button type="submit" class="btn btn-primary">Enviar</button>
      <button type="reset" class="btn btn-default">Limpiar</button>
    </section>
 
  </section>
 
</section>

CSS:

.panel
{
	border: 1px solid #ccc;
	box-shadow: 0px 0px 10px 1px rgba(0,0,0,.14);
	width: 450px;
}
.panel-head
{
	align-items: center;	
	display: flex;
	justify-content: space-between;
	padding: .5rem .25rem;
}
.logo
{
	display: block;
	background: url('php-logo.png') no-repeat;
	background-size: cover;
	height: 100px;
	width: 100px;
}
.panel-title
{
	display: flex;
	color: #777;
	font-family: 'segoe ui';
	justify-content: flex-start;
	font-size: 14pt;
	width: calc(100% - 120px);
}
.panel-body
{
	padding: 1rem 1.8rem;
}
.form-group-hoz
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 35px;
}
.form-btn-group-hoz
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
label
{
	color: #777;
	font-family: 'segoe ui';
	font-size: 14pt;
}
.textfield
{
    border: 1px solid #ccc;
    box-shadow: 0px 0px 0px 10px #fff,
       0px 0px 0px 11px #ccc,
       0px 2px 0px 11px #999;
    border-radius: 2px;
    color: #888;
    font-size: 14pt;
    padding: .25rem .5rem;
    transition: all .25s linear;
    width: 60%;
}
.textfield:focus
{
    border: 1px solid rgba(0,144,255,.4);
}
.btn {
	border: 1px solid #ccc;
	border-radius: 2px;
	font-family: "segoe ui";
	padding: 12px 26px;
}
.btn:hover {
	outline: none;
}
.btn:last-child
{
	margin-left: 10px;
}
.btn-default {
	background-color: #E7E7E7;
	border: 1px solid #E7E7E7;
	color: #555;
}
.btn-default:hover {
	background-color: #B9B9B9;
	border: 1px solid #B9B9B9;
	color: #333;
}
.btn-primary {
	background-color: #337AB7;
	border: 1px solid #337AB7;
	color: rgba(255,255,255,.9);
}
.btn-primary:hover {
	background-color: #286090;
	border: 1px solid #286090;
}

Resultado:
(http://i.imgur.com/b0tEnqh.png?1)

Podrías aumentar la fuente del botón editando el CSS, en .btn, agrega un font-size: 16pt;.

Como lo quieres grandote, pues hice los botones más grandes mediante la propiedad padding. Personalmente, haría todo tamaño estándar.

Para eso necesito saber qué contenedor es el que tiene el margen. Si tu no le has dado ese margen, podrías aplicar un reset general al principio de tu hoja de estilos. Es necesario que sea al principio de todo.

*
{
    margin: 0;
    padding: 0;
}

Es muy difícil poder darte una solución eficiente ignorando tantos detalles.

Por ejemplo, si es el único elemento visible (el form) y quieres que se pegue a la esquina izquierda, puedes hacer lo siguiente:

Agregarle un conenedor con la clase 'panel-wrapper', y hacer que éste tenga una posición absoluta, por lo tanto, podrás colocarlo donde desees mediante las propiedades top, right, bottom y left.

Otra opción es aplicar un display flex horizontal y hacer un align-items: flex-start y un justify-content: flex-start. Ésto es mucho mejor ya que cuando bajemos el scroll por ejemplo, el formulario no se verá, en tanto si lo hacemos de la otra manera, el formulario siempre estará visible ya que tiene una posición absoluta en pantalla.

<section class="panel-wrapper">
	<section class="panel">
 
		<section class="panel-head">
			<span class="logo"></span>
			<p class="panel-title">T&#38;#237;tulo del form</p>
		</section>
 
		<section class="panel-body">
 
			<section class="form-group-hoz">
				<label for="nombre">Nombre:</label>
				<input type="text" id="nombre" class="textfield"/>
			</section>
 
			<section class="form-group-hoz">
				<label for="apellido">Apellido:</label>
				<input type="text" id="apellido" class="textfield"/>
			</section>
 
			<section class="form-btn-group-hoz">
				<button type="submit" class="btn btn-primary">Enviar</button>
				<button type="reset" class="btn btn-default">Limpiar</button>
			</section>
 
		</section>
 
	</section>
</section>

1era forma:

.panel-wrapper
{
	left: 0;
	position: absolute;
	top: 0;
	width: 450px;
}

2da forma (recomendada):

.panel-wrapper
{
	align-items: flex-start;
	display: flex;
	flex-flow: row nowrap;
        height: 100vh;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	width: 100%;
}

Funciona en versiones actuales de Firefox y Chrome. No testeado en IE.

Mejor crea un nuevo tema con tus problemas de diseño en ésta misma categoría. El tema se ha disvirtuado mucho desde la duda original.